import * as React from 'react';
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',
      icon: <i className="iconfont icon-male !text-[24px]" aria-hidden="true"></i>,
    },
    {
      value: Gender.FEMALE,
      label: 'Female', 
      icon: <i className="iconfont icon-female !text-[24px]" aria-hidden="true"></i>,
    },
    {
      value: Gender.OTHER,
      label: 'Other',
      icon: <i className="iconfont icon-nonconforming !text-[24px]" aria-hidden="true"></i>,
    }
  ]

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