"use client";

import ExploreDirectory from "@/components/explore/ExploreDirectory";
import { Chip } from "@/components/life/Controls";
import type { CelebrationVenue } from "@/lib/api/events";
import type { PlaceItem } from "@/lib/api/places";
import { useVenuesStore } from "@/store/events";

/** Styles seeded on the backend. Unknown styles still show as tags; they just have no chip. */
const STYLES = ["traditional", "modern", "hall", "beach", "luxury"];
export const venueStyle = (s: string) => s.charAt(0).toUpperCase() + s.slice(1);
export const venueTags = (p: PlaceItem) => {
  const sub = (p as CelebrationVenue).subtype;
  return [...(sub?.venue_style ? [venueStyle(sub.venue_style)] : []), ...(sub?.capacity ? [`Up to ${sub.capacity} guests`] : [])];
};

/** Wedding and celebration venues: style chips, city, search. */
export default function VenueDirectory() {
  const style = useVenuesStore((s) => s.filters.venue_style);
  const setFilters = useVenuesStore((s) => s.setFilters);
  const pick = (venue_style?: string) => setFilters({ venue_style, page: 1 });

  return (
    <ExploreDirectory
      useStore={useVenuesStore}
      kind="venue"
      noun="venues"
      tags={venueTags}
      href={(p) => `/life-and-fun/details/venue?id=${p.id}`}
      extra={
        <div className="lf-group" role="group" aria-label="Venue style">
          <Chip pressed={!style} onClick={() => pick(undefined)}>
            All styles
          </Chip>
          {STYLES.map((s) => (
            <Chip key={s} pressed={style === s} onClick={() => pick(s)}>
              {venueStyle(s)}
            </Chip>
          ))}
        </div>
      }
    />
  );
}