'use client';

import { useRouter } from 'next/navigation';
import Image from 'next/image';

type ChatButtonProps = {
  characterId: string;
};

export default function ChatButton({ characterId }: ChatButtonProps) {
  const router = useRouter();

  return (
    <div
      onClick={() => router.push(`/character/${characterId}/chat`)}
      className="inline-flex h-12.5 w-75 items-center justify-center gap-3 rounded-full hover:cursor-pointer"
      style={{
        background: `linear-gradient(92.76deg,rgba(166, 83, 255, 1) 0%,rgba(0, 101, 255, 1) 80%,rgba(0, 157, 255, 1) 100%)`,
      }}
    >
      <Image src={'/component/send.svg'} alt="chat" width={20} height={20} />
      Chat Now
    </div>
  );
}
