'use client';
import {
  GenerateInputIcon,
  PhoneCallIcon,
  PortraitModeIcon,
} from '@/assets/chatacter';
import { useChatStore } from '../../store';
import IconFont from '@/components/ui/iconFont';
import { cn } from '@/lib';
import Image from 'next/image';

export default function Actions() {
  const isPortraitMode = useChatStore((state) => state.isPortraitMode);
  const setIsPortraitMode = useChatStore((state) => state.setIsPortraitMode);
  const setIsPhoneCallMode = useChatStore((state) => state.setIsPhoneCallMode);
  const className = 'text-[#0066FF] cursor-pointer hover:text-[#4269D6]';

  const suggestMessages = [
    'The threads of fate intertwine once more...The threads of fate intert',
    'The threads of fate intertwine once more.',
    'The threads of fate intertwine once more.',
  ];

  return (
    <div className="mb-4">
      <div className="relative mb-5 flex flex-col gap-2">
        {suggestMessages.map((message, index) => (
          <div
            style={{
              backgroundColor: 'rgba(36, 44, 80, 0.9)',
              width: '70%',
            }}
            className="flex h-10 cursor-pointer items-center rounded-full px-4"
            key={`message-${index}`}
          >
            <span className="line-clamp-2 text-xs">{message}</span>
          </div>
        ))}
        <span
          style={{ left: '71%' }}
          className="flex-center absolute bottom-0 h-7 w-7 cursor-pointer rounded-full bg-black/40"
        >
          <IconFont type="icon-zhongxie" size={18} />
        </span>
      </div>
      {/* action */}
      <div className="flex justify-between">
        <div onClick={() => null} className="flex items-center gap-5">
          <div className={className}>
            <GenerateInputIcon />
          </div>
          <div
            onClick={() => setIsPhoneCallMode(true)}
            className={cn(className, 'relative')}
          >
            <PhoneCallIcon />
            <Image
              className="absolute right-0 bottom-0"
              src="/component/vip.svg"
              alt="phone call"
              width={20}
              height={20}
            />
          </div>
        </div>
        <div
          onClick={() => setIsPortraitMode(!isPortraitMode)}
          className="hover:cursor-pointer"
        >
          <PortraitModeIcon />
        </div>
      </div>
    </div>
  );
}
