import React from "react";
import type { Floor } from "../types";
import { ProductGrid } from "./ProductGrid";

export function FloorSection({ floor, basePath = "" }: { floor: Floor; basePath?: string }) {
  return (
    <section className="mt-12">
      <div className="mx-auto max-w-screen-2xl px-4">
        <div className="flex items-end justify-between mb-4">
          <h2 className="text-xl font-semibold text-gray-900">{floor.title}</h2>
          <a href="#" className="text-sm text-gray-600 hover:text-gray-900">查看更多</a>
        </div>
        <div className="grid md:grid-cols-[2fr,3fr] gap-4">
          {floor.hero ? (
            <a href={floor.hero.href ? `${basePath}${floor.hero.href}` : "#"} className="block rounded-lg overflow-hidden">
              <img src={floor.hero.image} alt={floor.hero.title ?? floor.title} className="w-full object-cover aspect-[4/3]" />
            </a>
          ) : (
            <div className="hidden md:block" />
          )}
          <ProductGrid items={floor.products} basePath={basePath} />
        </div>
      </div>
    </section>
  );
}