"use client";

import React from "react";
import Image from "next/image";
import Link from "next/link";
import { useAppSelector } from "@/redux/hooks";

interface SeaQaCTAProps {
  onLoginClick?: () => void;
}

const SeaQaCTA: React.FC<SeaQaCTAProps> = ({ onLoginClick }) => {
  const { user } = useAppSelector((state) => state.auth);

  const handleAskClick = (e: React.MouseEvent) => {
    if (!user) {
      e.preventDefault();
      onLoginClick?.();
    }
  };

  return (
    <div className="bg-white border border-brand-border-card rounded-[14px] shadow-sm flex flex-col items-center w-full md:max-w-[286px] h-[221px]">
      <div className="w-full md:w-[286px] h-[84px] bg-blue-light flex flex-col items-center justify-center relative rounded-t-[14px]">
        <div className="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[56px] h-[56px] flex items-center justify-center">
          <Image
            src="/assets/images/rounded-primary.svg"
            alt="Bg"
            fill
            className="object-contain"
          />
          <div className="relative z-10 w-6 h-6">
            <Image
              src="/assets/images/question-mark.svg"
              alt="Question"
              fill
              className="object-contain"
            />
          </div>
        </div>
        <h3 className="text-white font-bold text-[20px] leading-[28px] tracking-[-0.2px] text-center mt-4">
          Have a Question?
        </h3>
      </div>

      <div className="flex-1 flex flex-col items-center justify-center text-center gap-4 px-4">
        <p className="text-black text-[14px] font-semibold leading-[1.2] tracking-[-0.14px]">
          Knowledge is having the right answer. <br />
          Intelligence is asking the right question.
        </p>

        <Link
          href="/questions/ask"
          onClick={handleAskClick}
          className="inline-flex items-center justify-center gap-[3px] border border-gray-775 rounded-[35px] px-[11px] py-[7px] cursor-pointer hover:bg-gray-50 transition-colors"
        >
          <Image
            src="/assets/icons/question-msg.svg"
            alt="Question"
            width={24}
            height={24}
          />
          <span className="text-gray-775 text-[14px] font-bold leading-[1.2] tracking-[-0.14px]">
            Ask a Question
          </span>
        </Link>
      </div>
    </div>
  );
};

export default SeaQaCTA;