import React from 'react'
import { cn } from '../lib/utils'

interface MyButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: 'blue' | 'red' | 'green'
  fillColor?: string
  textColor?: string
  fullWidth?: boolean
  textContent?: string
  children?: React.ReactNode
}

const variantStyles: Record<string, string> = {
  blue: 'bg-brand-500 text-white hover:bg-brand-600',
  red: 'bg-red-500 text-white hover:bg-red-600',
  green: 'bg-green-500 text-white hover:bg-green-600',
}

export function MyButton({
  variant = 'blue',
  fullWidth,
  textContent,
  children,
  className,
  disabled,
  style,
  ...props
}: MyButtonProps) {
  return (
    <button
      className={cn(
        'inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
        variantStyles[variant] || variantStyles.blue,
        fullWidth && 'w-full',
        className
      )}
      disabled={disabled}
      style={style}
      {...props}
    >
      {textContent || children}
    </button>
  )
}

interface pButtonProps extends Omit<MyButtonProps, 'children'> {
  text: string
}

export function pButton({ text, ...props }: pButtonProps) {
  return <MyButton {...props}>{text}</MyButton>
}
