import { z } from "zod";
import { registerSection } from "./registry";
import { registerSchema } from "./schemas";

const LAYOUT = "destinations_grid";

export const DestinationsGridSchema = z.object({
  eyebrow: z.string().default(""),
  title_lines: z.array(z.string()).default([]),
  lede: z.string().default(""),
  items: z
    .array(
      z.object({
        key: z.string().default(""),
        region: z.string().default(""),
        name: z.string().default(""),
      }),
    )
    .default([]),
});

export type DestinationsGridData = z.infer<typeof DestinationsGridSchema>;

export function DestinationsGrid({ data }: { data: DestinationsGridData }) {
  return (
    <section className="sec" data-screen-label="Destinations">
      <div className="wrap">
        <div className="section-title">
          {data.eyebrow ? (
            <span className="eyebrow green">
              <span className="pip" />
              {data.eyebrow}
            </span>
          ) : null}
          {data.title_lines.length > 0 ? (
            <h2 className="h-section green">
              {data.title_lines.map((line, i) => (
                <span
                  key={i}
                  dangerouslySetInnerHTML={{ __html: line + (i < data.title_lines.length - 1 ? "<br/>" : "") }}
                />
              ))}
            </h2>
          ) : null}
          {data.lede ? <p className="lede">{data.lede}</p> : null}
        </div>
        <div className="dest-grid">
          {data.items.map((item, i) => (
            <div key={i} className={`dest ${item.key || `d${i + 1}`}`}>
              <div className="lab">
                <div className="eb">{item.region}</div>
                <div className="ttl">{item.name}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

registerSection<DestinationsGridData>(LAYOUT, DestinationsGrid);
registerSchema(LAYOUT, DestinationsGridSchema);