"use client";
import Breadcrumb from "@/components/Breadcrumbs/Breadcrumb";
import Stepper, { Step } from "@/components/ui/Stepper";
import { BreadcrumbItem } from "@/types/shared";
import { useState } from "react";
import { ShowcaseSection } from "../../components/Layouts/showcase-section";
import ChartStep from "./_components/ChartStep";
import HeroStep from "./_components/HeroStep";

const Marketing = () => {
  const [step, setStep] = useState(0);
  const breadcrumbItems: BreadcrumbItem[] = [
    {
      href: "/",
      name: "Dashboard",
    },
    {
      href: "/marketing",
      name: "Marketing",
    },
  ];
  const steps: Step[] = [
    {
      title: "Hero",
      description: "Create the hero section",
      content: <HeroStep />,
    },
    {
      title: "Chart",
      description: "Create the chart",
      content: <ChartStep />,
    },
    {
      title: "Preferences",
      description: "Choose preferences",
      content: <div>step 3</div>,
    },
    {
      title: "Review",
      description: "Review and confirm",
      content: <div>step 4</div>,
    },
  ];
  return (
    <>
      <Breadcrumb items={breadcrumbItems} />
      <ShowcaseSection title="Create Marketing page">
        <Stepper
          steps={steps}
          currentStep={step}
          onStepChange={setStep}
        ></Stepper>
      </ShowcaseSection>
    </>
  );
};

export default Marketing;
