import Image from "next/image";
import Link from "next/link";

import { Button } from "@/components/ui/button";

interface Hero174Props {
  pageHeading?: string;
  title?: string;
  description?: string;
  imageSrc?: string;
  imageAlt?: string;
  ctaLabel?: string;
  ctaHref?: string;
}

const defaultProps: Required<Hero174Props> = {
  pageHeading: "مستر دکور",
  title: "طراحی و تولید استند ویترین طلافروشی برای فروش بیشتر",
  description:
    "مستر دکور، تامین کننده تخصصی استند و ملزومات دکور ویترین طلا و جواهر است؛ راهکاری که چیدمان فروشگاه شما را حرفه ای تر می کند و توجه مشتری را دقیقاً روی سرویس های شما نگه می دارد.",
  imageSrc: "/assets/main-pic/mr_decor-mainpic.jpg",
  imageAlt: "نمونه ویترین و دکور فروشگاهی",
  ctaLabel: "مشاهده محصولات",
  ctaHref: "/product",
};

export function Hero174(props: Hero174Props) {
  const {
    pageHeading,
    title,
    description,
    imageSrc,
    imageAlt,
    ctaLabel,
    ctaHref,
  } = {
    ...defaultProps,
    ...props,
  };

  return (
    <section className="relative min-h-screen w-full" aria-labelledby="home-hero-page-heading">
      <h1 id="home-hero-page-heading" className="sr-only">
        {pageHeading}
      </h1>

      <div className="absolute inset-0">
        <Image
          src={imageSrc}
          alt={imageAlt}
          fill
          priority
          quality={100}
          sizes="100vw"
          className="object-cover object-[center_58%]"
        />
        <div className="absolute inset-0 bg-black/62" />
        <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top,rgba(0,0,0,0.34),transparent_60%)]" />
        <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_bottom,rgba(0,0,0,0.3),transparent_62%)]" />
      </div>

      <div className="relative z-10 flex min-h-screen flex-col">
        <div className="flex flex-1 items-center justify-center px-6 pt-24 pb-14 text-center md:px-10">
          <div className="flex max-w-4xl flex-col items-center gap-5">
            <h2 className="text-heading-1 font-bold text-overlay-foreground">{title}</h2>
            <p className="max-w-2xl text-body text-overlay-foreground/90">{description}</p>
            <Button asChild size="lg" className="rounded-full">
              <Link href={ctaHref}>{ctaLabel}</Link>
            </Button>
          </div>
        </div>

      </div>
    </section>
  );
}