import { JSX } from 'react';

interface CookieToggleProps {
  active: boolean;
}

export default function CookieToggle({ active }: CookieToggleProps): JSX.Element {
  return (
    <div
      className={
        'relative h-4 aspect-[2/1] rounded-full overflow-hidden shadow-inner group-disabled:opacity-50 flex flex-col transition-colors ' +
        (active ? 'bg-white/30' : 'bg-white/10')
      }
    >
      <div
        className={
          'absolute left-0 h-full aspect-square rounded-full shadow bg-white transition-all ' +
          (active ? 'scale-0' : 'scale-100')
        }
      />
      <div
        className={
          'absolute right-0 h-full aspect-square rounded-full shadow bg-mma-yellow transition-all ' +
          (active ? 'scale-100' : 'scale-0')
        }
      />
    </div>
  );
}