import Link from "next/link";

import { ItemGrid } from "@/components/item-grid";

export interface RecommendationRailItem {
  id: string;
  title: string;
  brand: string | null;
  price: number;
  original_retail: number | null;
  condition: string;
  thumbnail_url: string | null;
  store: { id: string; name: string | null };
  store_average_rating?: number | null;
  store_review_count?: number | null;
}

export interface RecommendationRailProps {
  title: string;
  items: RecommendationRailItem[];
  isLoading?: boolean;
  viewAllHref?: string;
  viewAllLabel?: string;
  skeletonCount?: number;
  className?: string;
}

export function RecommendationRail({
  title,
  items,
  isLoading = false,
  viewAllHref,
  viewAllLabel = "View all",
  skeletonCount = 4,
  className = "mt-14",
}: RecommendationRailProps) {
  if (!isLoading && items.length === 0) return null;

  return (
    <section aria-label={title} className={className}>
      <div className="mb-4 flex items-center justify-between gap-4">
        <h2 className="text-xl font-bold text-slate-900">{title}</h2>
        {viewAllHref ? (
          <Link
            href={viewAllHref}
            className="shrink-0 text-sm font-medium text-forest-600 hover:text-forest-700"
          >
            {viewAllLabel}
          </Link>
        ) : null}
      </div>

      <ItemGrid items={items} isLoading={isLoading} skeletonCount={skeletonCount} />
    </section>
  );
}