"use client";

import type {
  Block,
  SectionBlockProps,
  TextBlockProps,
  ButtonBlockProps,
} from "@/features/editor/state/editorStore";

export function createHeroTemplateBlocks(opts: {
  sectionId: string;
  createId: () => string;
}): { blocks: Block[]; lastSelectedId: string } {
  const { sectionId, createId } = opts;

  const sectionProps: SectionBlockProps = {
    background: "default",
    paddingY: "lg",
    // 히어로는 가장 여백이 넓고 화면 중앙에 집중되도록 설정한다.
    paddingYPx: 96,
    maxWidthPx: 960,
    gapXPx: 40,
    backgroundColorCustom: "#020617", // 다크 히어로 섹션
    columns: [
      {
        id: `${sectionId}_col_1`,
        span: 12,
      },
    ],
  };

  const sectionBlock: Block = {
    id: sectionId,
    type: "section",
    props: sectionProps,
    sectionId: null,
    columnId: null,
  };

  const firstColumnId = `${sectionId}_col_1`;

  const heroHeadlineId = createId();
  const heroHeadlineProps: TextBlockProps = {
    text: "Hero 제목을 여기에 입력하세요",
    align: "center",
    size: "lg",
  } as any;
  const heroHeadline: Block = {
    id: heroHeadlineId,
    type: "text",
    props: heroHeadlineProps,
    sectionId,
    columnId: firstColumnId,
  };

  const heroSubId = createId();
  const heroSubProps: TextBlockProps = {
    text: "제품이나 서비스를 한 문장으로 설명하는 서브텍스트입니다.",
    align: "center",
    size: "base",
  } as any;
  const heroSub: Block = {
    id: heroSubId,
    type: "text",
    props: heroSubProps,
    sectionId,
    columnId: firstColumnId,
  };

  const heroButtonId = createId();
  const heroButtonProps: ButtonBlockProps = {
    label: "지금 시작하기",
    href: "#",
    align: "center",
    size: "md",
    variant: "solid",
    colorPalette: "primary",
    fullWidth: false,
    borderRadius: "md",
    fontSizeCustom: "14px",
    textColorCustom: "#0b1120",
    fillColorCustom: "#0ea5e9",
    strokeColorCustom: "#0284c7",
  };
  const heroButton: Block = {
    id: heroButtonId,
    type: "button",
    props: heroButtonProps,
    sectionId,
    columnId: firstColumnId,
  };

  const blocks: Block[] = [sectionBlock, heroHeadline, heroSub, heroButton];

  return { blocks, lastSelectedId: heroButtonId };
}