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(24).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()
    .min(60)
    .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  bg-[#101B37] p-[53px] ">


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

      <div className="absolute bottom-[26px] left-1/2 -translate-x-1/2 rounded-full border border-[#31415880] bg-[#1D293DCC] px-[22px] py-[8px] text-[14px] text-[#CAD5E2]">
        {data.pageLabel}
      </div>
    </div>
  );
};

export default CodeSlide08CodeExplanationText;
