'use client';
import { Chip } from '@/components/ui/chip';
import { Gender } from '@/types/user';
import { cn } from '@/lib/utils';

const GenderInput = ({
  value,
  onChange,
  disabled = false,
}: {
  value: Gender | undefined;
  onChange: (value: Gender) => void;
  disabled?: boolean;
}) => {
  const items = [
    {
      value: Gender.MALE,
      label: 'Male',
      className: 'border-[rgba(78,72,255,1)] text-white',
      icon: <i className="iconfont icon-male !text-[24px]" aria-hidden="true"></i>,
      activeClassName: 'bg-[rgba(78,72,255,1)]',
    },
    {
      value: Gender.FEMALE,
      label: 'Female',
      icon: <i className="iconfont icon-female !text-[24px]" aria-hidden="true"></i>,
    },
    {
      value: Gender.OTHER,
      label: 'Other',
      icon: 'Other',
    },
  ];

  return (
    <div className="grid grid-cols-3 gap-2" role="radiogroup" aria-label="Gender">
      {items.map((item) => {
        const isActive = value === item.value;
        return (
          <Chip
            size="large"
            block
            key={item.value}
            disabled={disabled && value !== item.value}
            state={isActive ? 'active' : 'inactive'}
            className={cn(
              'cursor-pointer',
              item.className,
              isActive && item.activeClassName,
              disabled && 'pointer-events-none'
            )}
            onClick={() => !disabled && onChange(item.value)}
            role="radio"
            aria-checked={isActive}
            aria-label={item.label}
          >
            {item.icon}
            <span className="sr-only">{item.label}</span>
          </Chip>
        );
      })}
    </div>
  );
};

export default GenderInput;
