"use client"

import { Link } from "react-router"

import { cn } from "@/lib/utils"
import type { ProductHomeCard } from "@/lib/product-home"

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

export function ShelfCardContent({
  card,
  roomy,
  className,
}: {
  card: ProductHomeCard
  roomy?: boolean
  className?: string
}) {
  return (
    <div className={cn("flex min-h-0 flex-col font-sans", className)}>
      <div className="flex min-w-0 flex-1 flex-col gap-2">
        <h3 className="min-w-0 font-sans text-base font-semibold leading-snug tracking-tight text-balance">
          <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={cn(
          "mt-4 flex min-h-9 items-center justify-between gap-3",
          roomy && "mt-6",
        )}
      >
        <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>
  )
}