import * as z from "zod";

export const slideLayoutId = "code-explanation-text-slide";
export const slideLayoutName = "Code Explanation Text Slide";
export const slideLayoutDescription =
  "A text-only explanation slide with generous whitespace for narrative documentation.";

export const Schema = z.object({
  title: z.string().min(8).max(30).default("Code + Explanation").meta({
    description: "Main slide title shown at the top-left.",
  }),
  explanationTitle: z.string().min(4).max(20).default("Explanation").meta({
    description: "Subheading above the paragraph body.",
  }),
  explanation: z
    .string()

    .max(360)
    .default(
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
    )
    .meta({
      description: "Long-form explanation body.",
    }),
  pageLabel: z.string().min(3).max(8).default("8 / 11").meta({
    description: "Bottom pagination label.",
  }),
});

export type SchemaType = z.infer<typeof Schema>;

const CodeSlide08CodeExplanationText = ({ data }: { data: Partial<SchemaType> }) => {

  return (
    <div
      className="relative h-[720px] w-[1280px] overflow-hidden p-[53px]"
      style={{
        backgroundColor: "var(--background-color,#101B37)",
        fontFamily: "var(--body-font-family,Nunito Sans)",
      }}
    >


      <h2 className="text-[64px] font-medium" style={{ color: "var(--background-text,#f2f4ff)" }}>{data.title}</h2>
      <div className="relative z-10 h-full max-w-[560px]">
        <h3 className="mt-[34px] text-[24px] font-medium" style={{ color: "var(--background-text,#f1f4ff)" }}>{data.explanationTitle}</h3>
        <p className="mt-[16px] text-[22px] leading-[145%]" style={{ color: "var(--background-text,#d2d9ff)" }}>{data.explanation}</p>
      </div>

      <div
        className="absolute bottom-[26px] left-1/2 -translate-x-1/2 rounded-full border px-[22px] py-[8px] text-[14px]"
        style={{
          borderColor: "var(--stroke,#31415880)",
          backgroundColor: "var(--card-color,#1D293DCC)",
          color: "var(--background-text,#CAD5E2)",
        }}
      >
        {data.pageLabel}
      </div>
    </div>
  );
};

export default CodeSlide08CodeExplanationText;