import { Label } from '@/components/ui/label';
import { StyleButtonProps, TextStyleControlProps } from '@/src/types/builder';

function StyleButton({ active, onClick, children }: StyleButtonProps) {
  return (
    <button
      type='button'
      onClick={onClick}
      className={`p-2 rounded-md flex-1 text-sm ${active ? 'bg-neutral-200 text-neutral-900' : 'bg-neutral-600 text-neutral-200'}`}
    >
      {children}
    </button>
  );
}

export function TextStyleControl({ styling, onStylingChange, enabledOptions }: TextStyleControlProps) {
  const handleTextDecorationChange = (decoration: 'none' | 'underline' | 'line-through') => {
    onStylingChange({ ...styling, textDecoration: styling?.textDecoration === decoration ? undefined : decoration });
  };

  const handleFontStyleChange = (style: 'normal' | 'italic') => {
    onStylingChange({ ...styling, fontStyle: styling?.fontStyle === 'italic' ? undefined : style });
  };

  return (
    <div className='space-y-2'>
      <Label className='text-xs text-neutral-400'>Text Style</Label>
      <div className='flex gap-2'>
        {enabledOptions.fontStyle && (
          <StyleButton active={styling?.fontStyle === 'italic'} onClick={() => handleFontStyleChange('italic')}>
            Italic
          </StyleButton>
        )}
        {enabledOptions.textDecoration && (
          <>
            <StyleButton
              active={styling?.textDecoration === 'underline'}
              onClick={() => handleTextDecorationChange('underline')}
            >
              Underline
            </StyleButton>
            <StyleButton
              active={styling?.textDecoration === 'line-through'}
              onClick={() => handleTextDecorationChange('line-through')}
            >
              Strikethrough
            </StyleButton>
          </>
        )}
      </div>
    </div>
  );
}
