"use client"

/**
 * Featured promo — same shelf card surface and mock as {@link ProductShelves},
 * with Ivy on the title and a dismiss control for the storefront slot.
 */

import { Link } from "react-router"

import { Button } from "@/components/ui/button"
import { Tip } from "@/components/ui/tip"
import { cn } from "@/lib/utils"
import type { ProductHomeCard } from "@/lib/product-home"

import { ProductMarkTile } from "./product-home-parts"
import { shelfCardField, ShelfCardIllustration } from "./product-shelf-illustration"
import { ShelfCardAction } from "./shelf-card-action"

export function FeaturedShelfBanner({
  card,
  onDismiss,
}: {
  card: ProductHomeCard
  onDismiss: () => void
}) {
  const fieldStyle = {
    backgroundColor: shelfCardField(card.brandColor),
  } as React.CSSProperties

  return (
    <article
      className={cn(
        "group relative flex overflow-hidden rounded-xl border border-border p-5 font-sans shadow-xs transition-shadow",
        "focus-within:shadow-md hover:shadow-md sm:flex-row sm:gap-6 sm:p-6",
      )}
      style={fieldStyle}
    >
      <Tip label="Dismiss" side="bottom">
        <Button
          type="button"
          variant="ghost"
          size="icon-sm"
          aria-label={`Dismiss ${card.label}`}
          onClick={onDismiss}
          className="absolute end-3 top-3 z-20 shrink-0"
        >
          <i className="fa-solid fa-xmark" aria-hidden="true" />
        </Button>
      </Tip>

      <div className="mb-5 min-w-0 sm:mb-0 sm:w-[44%]">
        <ShelfCardIllustration card={card} />
      </div>

      <div className="flex min-w-0 flex-1 flex-col sm:justify-center">
        <div className="flex min-w-0 flex-1 flex-col gap-2 pe-8 sm:pe-10">
          <p className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
            Featured
          </p>
          <h3 className="min-w-0 font-heading text-xl font-semibold leading-snug tracking-tight text-balance sm:text-2xl">
            <Link
              to={`/home/${card.slug}`}
              className="after:absolute after:inset-0 after:content-['']"
            >
              {card.label}
            </Link>
          </h3>
          <p className="line-clamp-2 text-sm leading-relaxed text-muted-foreground text-pretty">
            {card.tagline}
          </p>
        </div>

        <div className="mt-6 flex min-h-9 items-center justify-between gap-3">
          <div className="relative flex min-w-0 items-center gap-2">
            <ShelfCardAction card={card} />
          </div>
          <ProductMarkTile card={card} size="lg" className="relative shrink-0" />
        </div>
      </div>
    </article>
  )
}