import * as RadioGroup from '@radix-ui/react-radio-group';
import React from 'react';

import { Badge, BadgeProps } from '@/components/Badge/Badge';
import { CheckIcon } from '@/icons';

export interface RadioOption {
  value: string;
  label: string;
  badge?: Omit<BadgeProps, 'text'> & { text: string };
}

export interface RadioGroupWithBadgesProps {
  options: RadioOption[];
  defaultValue?: string;
  orientation?: 'horizontal' | 'vertical';
  onChange?: (value: string) => void;
  className?: string;
  value?: string;
}

export const RadioGroupWithBadges: React.FC<RadioGroupWithBadgesProps> = ({
  options,
  defaultValue,
  orientation = 'horizontal',
  onChange,
  className,
  value,
}) => {
  return (
    <RadioGroup.Root
      defaultValue={defaultValue}
      value={value}
      onValueChange={onChange}
      className={`flex ${orientation === 'vertical' ? 'flex-col' : 'flex-row'} gap-4 ${className || ''}`}
    >
      {options.map((option) => {
        const isSelected = value === option.value;

        return (
          <RadioGroup.Item
            key={option.value}
            value={option.value}
            className='group flex cursor-pointer items-center gap-2 outline-none'
          >
            <div className='relative flex h-4 w-4 items-center justify-center rounded-full border border-white/15 bg-white/4'>
              {isSelected && <CheckIcon color='white' />}
            </div>
            <label className='flex cursor-pointer items-center gap-1'>
              {option.label}
              {option.badge && <Badge {...option.badge} />}
            </label>
          </RadioGroup.Item>
        );
      })}
    </RadioGroup.Root>
  );
};

export default RadioGroupWithBadges;