'use client';

import { Select } from '../ui/inputs';
import Modal from '../ui/modal';
import Image from 'next/image';

type VoiceActorSelectDialogProps = {
  value?: string;
  onChange?: (value: string) => void;
};
export default function VoiceActorSelectDialog(
  props: VoiceActorSelectDialogProps
) {
  const { value, onChange } = props;
  const options = [
    { label: 'Voice Actor 1', value: 'voiceActor1', gender: 'male' },
    { label: 'Voice Actor 2', value: 'voiceActor2', gender: 'female' },
    { label: 'Voice Actor 3', value: 'voiceActor3', gender: 'male' },
  ];

  return (
    <Modal
      classNames={{
        content: 'w-200',
      }}
      title="Voice Actor"
      trigger={
        <Select.View icon={'/character/voice_actor.svg'} text="Voice Actor" />
      }
    >
      <div className="grid max-h-80 grid-cols-2 gap-5 overflow-auto pr-2.5">
        {options?.map((i) => {
          return (
            <div
              style={{
                background:
                  i.gender === 'male'
                    ? 'linear-gradient(90deg, rgba(0, 157, 255, 0.3) 0%, rgba(0, 157, 255, 0.1) 100%)'
                    : 'rgba(112, 27, 140, 1)',
              }}
              key={i.value}
              className="flex h-20 cursor-pointer items-center justify-between rounded-[10px] p-2 pr-5"
            >
              <div className="flex flex-1 gap-2.5">
                <div>
                  <Image
                    src={'/avator.png'}
                    className="rounded-full"
                    width={50}
                    height={50}
                    alt="avator"
                  />
                </div>
                <div>
                  <div className="font-bold">{'Name 1'}</div>
                  <div className="text-sm text-white/60">
                    {'Anime-Style Girl'}
                  </div>
                </div>
              </div>
              <div className="flex-center h-4.5 w-4.5 rounded-full bg-black">
                <div className="h-3 w-3 rounded-full bg-green-600"></div>
              </div>
            </div>
          );
        })}
      </div>
    </Modal>
  );
}
