import Link from "next/link";

import { getCatalog } from "@/lib/api";

export const dynamic = "force-dynamic";

const SORTS = [
  ["price_asc", "Сначала дешевле"],
  ["price_desc", "Сначала дороже"],
  ["new", "Новые"],
] as const;

export default async function CatalogPage({
  searchParams,
}: {
  searchParams: Promise<{ category_id?: string; sort?: string }>;
}) {
  const params = await searchParams;
  const sort = SORTS.some(([value]) => value === params.sort) ? params.sort! : "price_asc";
  const catalog = await getCatalog(params.category_id, sort);

  return (
    <>
      <h1>Каталог</h1>
      <div className="row">
        <Link href={`/?sort=${sort}`}>Все</Link>
        {catalog.categories.map((category) => (
          <Link key={category.id} href={`/?category_id=${category.id}&sort=${sort}`}>
            {category.name}
          </Link>
        ))}
      </div>
      <div className="row">
        {SORTS.map(([value, label]) => (
          <Link
            key={value}
            href={params.category_id ? `/?category_id=${params.category_id}&sort=${value}` : `/?sort=${value}`}
          >
            {label}
          </Link>
        ))}
      </div>
      <div className="grid">
        {catalog.products.map((product) => (
          <article className="card" key={product.id}>
            <Link href={`/products/${product.id}`}>
              <img src={`/backend/products/${product.id}/image`} alt="" />
              <h2>{product.title}</h2>
            </Link>
            <p className="muted">{product.category_name}</p>
            <p>{product.price} ₽</p>
          </article>
        ))}
      </div>
      {catalog.products.length === 0 && <p>В этой категории нет активных товаров.</p>}
    </>
  );
}