"use client";

import { useGetAbout } from "@/app/[name]/(Main)/about/hooks/useAboutData";
import { glassSurfaceFlat } from "@/lib/styles/glassSurface";
import Link from "next/link";
import { useParams } from "next/navigation";
import React from "react";
import SearchIcon from "../icons/SearchIcon";

interface SearchboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "results"> {
  placeholder?: string;
  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
}

export default function SearchBox({ className, value, placeholder = "", onChange, ...props }: SearchboxProps) {
  const { name } = useParams<{ name?: string }>();
  const { data: about } = useGetAbout();
  const showAiLink = !!name && !!about?.data?.enableAiChat;

  return (
    <div className="flex gap-4 items-center">
      <div className={glassSurfaceFlat("inline-flex rounded-xl px-4 h-10 w-full items-center content-center", className)}>
        <SearchIcon stroke="#8C90A3" />
        <input
          onChange={onChange}
          value={value}
          placeholder={placeholder}
          className="text-[#8C90A3] pt-1 block outline-none border-none focus:ring-0 focus:outline-none px-1.75 h-full items-center w-full text-xs!"
          type="search"
          {...props}
        />
      </div>
      {showAiLink && (
        <Link href={`/${name}/ai`} aria-label="AI" className={glassSurfaceFlat("inline-flex items-center justify-center rounded-xl w-10 h-10 shrink-0")}>
          <img src={"/assets/images/logo_ai2.svg"} alt="logo_ai" className="w-5" />
        </Link>
      )}
    </div>
  );
}
