'use client';
import { Modal, Select } from '@/components';
import { cn } from '@/lib';
import { useControllableValue } from 'ahooks';

import Image from 'next/image';

type ModelSelectDialogProps = {
  value?: string;
  onChange?: (value: string) => void;
};

export default function ModelSelectDialog(props: ModelSelectDialogProps) {
  const [value, onChange] = useControllableValue(props, {
    valuePropName: 'value',
    defaultValuePropName: 'defaultValue',
    trigger: 'onChange',
  });

  const options = [
    { label: 'Model 1', value: 'model1' },
    { label: 'Model 2', value: 'model2' },
    { label: 'Model 3', value: 'model3' },
  ];

  const isActive = true;

  return (
    <Modal
      title="REPLY"
      trigger={
        <Select.View icon={'/character/model_switch.svg'} text="Model 1" />
      }
    >
      <div className="flex flex-col">
        {/* items */}
        <div
          className={cn(
            'flex items-center justify-between rounded-[10px] p-4',
            isActive ? 'bg-white/10' : 'hover:bg-white/5',
            'cursor-pointer'
          )}
        >
          <div className="flex flex-1 items-center gap-3">
            <Image
              className="flex-shrink-0 rounded-full object-cover"
              src={'/avator.png'}
              alt="avator"
              width={50}
              height={50}
            />
            <div>
              <div>Max-0618</div>
              <div className="text-xs text-white/60">
                Previous-generation large model
              </div>
              <div
                style={{ color: 'rgba(0, 102, 255, 1)' }}
                className="text-sm"
              >
                0.3 points / 1K tokens{' '}
                <span className="text-green-600">(Recommended)</span>
              </div>
            </div>
          </div>
          <div className="flex-center h-4.5 w-4.5 rounded-full bg-black">
            {isActive && (
              <div className="h-3 w-3 rounded-full bg-green-600"></div>
            )}
          </div>
        </div>
      </div>
    </Modal>
  );
}
