import { AlignmentButtonProps, StylerBaseProps } from '@/src/types/builder';
import { FaAlignCenter, FaAlignLeft, FaAlignRight } from 'react-icons/fa';
import { Separator } from '@/components/ui/separator';

function AlignmentButton({ value, currentValue, onClick, icon }: AlignmentButtonProps) {
  return (
    <button
      type='button'
      onClick={onClick}
      className={`p-2 rounded-md flex-1 flex justify-center ${
        currentValue === value ? 'bg-neutral-200 text-neutral-800' : 'bg-neutral-600 text-neutral-300'
      }`}
    >
      {icon}
    </button>
  );
}

export function AlignmentControl({ styling, onStylingChange }: StylerBaseProps) {
  const handleAlignmentChange = (align: 'start' | 'center' | 'end') => {
    onStylingChange({ align });
  };

  return (
    <div className='space-y-3'>
      <h3 className='text-sm font-medium text-neutral-300'>Alignment</h3>
      <div className='flex gap-2'>
        <AlignmentButton
          value='start'
          currentValue={styling?.align}
          onClick={() => handleAlignmentChange('start')}
          icon={<FaAlignLeft />}
        />
        <AlignmentButton
          value='center'
          currentValue={styling?.align}
          onClick={() => handleAlignmentChange('center')}
          icon={<FaAlignCenter />}
        />
        <AlignmentButton
          value='end'
          currentValue={styling?.align}
          onClick={() => handleAlignmentChange('end')}
          icon={<FaAlignRight />}
        />
      </div>
      <Separator className='bg-neutral-700' />
    </div>
  );
}
