"use client";

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

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

const SeaQaAskInput: React.FC<SeaQaAskInputProps> = ({ onLoginClick }) => {
  const { user } = useAppSelector((state) => state.auth);
  const avatarSrc =
    typeof user?.profileImage === "string" && user.profileImage.trim() !== ""
      ? user.profileImage
      : "/assets/images/avatar-dummy.png";

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

  return (
    <Link
      href="/questions/ask"
      onClick={handleClick}
      className="bg-white border border-brand-border-card rounded-[14px] p-[15px] flex items-center w-full gap-[10px] self-stretch shadow-sm"
    >
      <div className="relative w-[51px] h-[51px] rounded-[117px] overflow-hidden shrink-0 bg-gray-100">
        <Image
          src={avatarSrc}
          alt={user?.name || "User Avatar"}
          fill
          className="object-cover"
        />
      </div>
      <div className="flex-1 bg-gray-100 rounded-[56px] px-5 py-[17px] flex items-center gap-[10px]">
        <div className="w-full text-black opacity-50 font-medium text-[14px] leading-[1.2] tracking-[-0.14px]">
          What do you want to ask or share?
        </div>
      </div>
    </Link>
  );
};

export default SeaQaAskInput;