import heroImage from "@/assets/images/category/hero.jpg";
import { ArrowLeft2 } from "iconsax-reactjs";
import Image from "next/image";
import Link from "next/link";
import { type FC } from "react";
import { CATEGORY_DESCRIPTION, CATEGORY_TITLE } from "../constants";

const CategoryHero: FC = () => {
  return (
    <>
      <section
        className="relative overflow-x-clip px-4 sm:px-8 lg:px-30 py-6 sm:py-8 lg:py-10"
        style={{
          backgroundImage: "linear-gradient(108.5deg, rgba(33, 88, 140, 0.1) 89.65%, rgba(237, 243, 248, 0.3) 100%)",
        }}
      >
        <div className="flex flex-col lg:flex-row lg:items-center gap-6 lg:gap-10">
          <div className="flex-1 space-y-3 sm:space-y-4">
            <h1 className="text-[#0A1B2C] text-2xl sm:text-3xl lg:text-[32px] font-bold">{CATEGORY_TITLE}</h1>
            <p className="text-sm text-[#0A1B2C]/80 leading-7 max-w-140">{CATEGORY_DESCRIPTION}</p>
          </div>

          <div className="relative z-10 mx-auto shrink-0 lg:mx-0 lg:-mb-28">
            <Image
              src={heroImage}
              alt={CATEGORY_TITLE}
              width={360}
              height={360}
              priority
              className="aspect-square w-55 sm:w-70 lg:w-[320px] rounded-2xl sm:rounded-3xl object-cover shadow-[0px_-4px_12px_0px_rgba(0,0,0,0.12)]"
            />
          </div>
        </div>
      </section>

      <nav aria-label="مسیر صفحه" className="relative z-0 flex items-center justify-start gap-2 bg-secondary px-4 sm:px-8 lg:px-30 py-3 text-sm text-[#3F4D5A]">
        <Link href="/" className="transition-colors hover:text-primary">
          صفحه اصلی
        </Link>
        <ArrowLeft2 size={14} color="currentColor" className="shrink-0" />
        <span className="font-bold">{CATEGORY_TITLE}</span>
      </nav>
    </>
  );
};

export default CategoryHero;