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

const LAYOUT = "what_includes";

export const WhatIncludesSchema = z.object({
  accent: z.enum(["purple", "green"]).default("green"),
  eyebrow: z.string().default(""),
  title_lines: z.array(z.string()).default([]),
  lede: z.string().default(""),
  footnote: z.string().default(""),
  items: z
    .array(
      z.object({
        icon: z.string().default(""),
        label: z.string().default(""),
      }),
    )
    .default([]),
});

export type WhatIncludesData = z.infer<typeof WhatIncludesSchema>;

export function WhatIncludes({ data }: { data: WhatIncludesData }) {
  const isGreen = data.accent === "green";
  return (
    <section
      className="sec"
      style={{
        background: "linear-gradient(180deg,var(--by-sand) 0%,#FBF8F2 100%)",
        borderTop: "1px solid var(--border)",
      }}
      data-screen-label="What Includes"
    >
      <div className="wrap">
        <div className="section-title">
          {data.eyebrow ? (
            <span className={isGreen ? "eyebrow green" : "eyebrow"}>
              <span className="pip" />
              {data.eyebrow}
            </span>
          ) : null}
          {data.title_lines.length > 0 ? (
            <h2 className={isGreen ? "h-section green" : "h-section"}>
              {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="package-include">
          <ul>
            {data.items.map((item, i) => (
              <li key={i}>
                <SectionIcon name={item.icon} size={18} />
                {item.label}
              </li>
            ))}
          </ul>
          {data.footnote ? <p className="footnote">{data.footnote}</p> : null}
        </div>
      </div>
    </section>
  );
}

registerSection<WhatIncludesData>(LAYOUT, WhatIncludes);
registerSchema(LAYOUT, WhatIncludesSchema);