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

const LAYOUT = "vision_mission";

export const VisionMissionSchema = z.object({
  eyebrow: z.string().default(""),
  title_lines: z.array(z.string()).default([]),
  vision: z
    .object({
      icon: z.string().default("eye"),
      title: z.string().default(""),
      body: z.string().default(""),
    })
    .default({ icon: "eye", title: "", body: "" }),
  mission: z
    .object({
      icon: z.string().default("target"),
      title: z.string().default(""),
      body: z.string().default(""),
    })
    .default({ icon: "target", title: "", body: "" }),
});

export type VisionMissionData = z.infer<typeof VisionMissionSchema>;

export function VisionMission({ data }: { data: VisionMissionData }) {
  return (
    <section className="sec" data-screen-label="Vision and Mission">
      <div className="wrap">
        <div className="section-title">
          {data.eyebrow ? (
            <span className="eyebrow">
              <span className="pip" />
              {data.eyebrow}
            </span>
          ) : null}
          {data.title_lines.length > 0 ? (
            <h2 className="h-section">
              {data.title_lines.map((line, i) => (
                <span
                  key={i}
                  dangerouslySetInnerHTML={{ __html: line + (i < data.title_lines.length - 1 ? "<br/>" : "") }}
                />
              ))}
            </h2>
          ) : null}
        </div>
        <div className="vm-grid">
          <div className="vm vision">
            <div className="ic">
              <SectionIcon name={data.vision.icon} size={24} />
            </div>
            <h3>{data.vision.title}</h3>
            <p>{data.vision.body}</p>
          </div>
          <div className="vm mission">
            <div className="ic">
              <SectionIcon name={data.mission.icon} size={24} />
            </div>
            <h3>{data.mission.title}</h3>
            <p>{data.mission.body}</p>
          </div>
        </div>
      </div>
    </section>
  );
}

registerSection<VisionMissionData>(LAYOUT, VisionMission);
registerSchema(LAYOUT, VisionMissionSchema);