import { Cuisine, Location, PRICE } from "@prisma/client";
import Link from "next/link";

export default async function SearchSideBar({
  locations,
  cuisines,
  searchParams
}: {
  locations: Location[];
  cuisines: Cuisine[];
  searchParams: {city?: string, location?: string, cuisine?: string, price: PRICE}
}) {
  console.log("cuisines: ", cuisines);
  console.log("locations: ", locations);

  const priceStyle = "border w-full text-reg font-light p-2 text-center"
  const prices = [
    {label: "$", price: PRICE.CHEAP, className: `${priceStyle} rounded-l`},
    {label: "$$", price: PRICE.REGULAR, className: `${priceStyle} `},
    {label: "$$$", price: PRICE.EXPENSIVE, className: `${priceStyle} rounded-r`}
  ];

  return (
    <div className="w-1/5">
      <div className="border-b pb-4 flex flex-col">
        <h1 className="mb-2">Region</h1>
        {locations.map((location, index) => (
          <Link
            href={{
              pathname: "/search",
              query: {
                ...searchParams,
                city: location.name,
              },
            }}
            key={index}
            className="font-light text-reg"
          >
            {location.name}
          </Link>
        ))}
      </div>
      <div className="border-b pb-4 mt-3 flex flex-col">
        <h1 className="mb-2">Cuisine</h1>
        {cuisines.map((cuisine, index) => (
          <Link
            href={{
              pathname: "/search",
              query: {
                ...searchParams,
                cuisine: cuisine.name,
              },
            }}
            key={index}
            className="font-light text-reg"
          >
            {cuisine.name}
          </Link>
        ))}
      </div>
      <div className="mt-3 pb-4">
        <h1 className="mb-2">Price</h1>
        <div className="flex">
          {
            prices.map(({price, label, className}) => (
              <Link
                href={{
                pathname: "/search",
                query: {
                  ...searchParams,
                  price: price,
                },
              }} className={className}>
              {label}
            </Link>
            ))
          }
        </div>
      </div>
    </div>
  );
}