import { cn } from '@/lib/utils';
import { ChecksIcon, XIcon } from '@phosphor-icons/react';

type ComProps = {
  value: boolean;
  size?: 'xs' | 'sm' | 'md' | 'lg';
};

const SIZE = {
  xs: 10,
  sm: 15,
  md: 20,
  lg: 30,
};

const TrueFalse = ({ value, size = 'sm' }: ComProps) => {
  return (
    <div className="flex flex-row  [&>*:not(:first-child)]:border-l *:p-1 *:px-3 border rounded-lg overflow-hidden">
      <div
        className={cn('bg-green-100 text-gray-300', {
          'bg-green-500 text-white': value,
        })}
      >
        <ChecksIcon size={SIZE[size]} weight="bold" />
      </div>
      <div
        className={cn('bg-red-200 text-gray-300', {
          'bg-red-500 text-white': !value,
        })}
      >
        <XIcon size={SIZE[size]} weight="bold" />
      </div>
    </div>
  );
};

export default TrueFalse;
