import { ComponentConfig } from "@reacteditor/core";
import { Sparkles } from "lucide-react";
import { Typography } from "@/editor/theme/Typography";

export type FeaturesProps = {
  tagline: string;
  heading: string;
  subheading: string;
  columns: "2" | "3" | "4";
  items: Array<{ title: string; body: string }>;
};

const colClass: Record<FeaturesProps["columns"], string> = {
  "2": "md:grid-cols-2",
  "3": "md:grid-cols-3",
  "4": "md:grid-cols-2 lg:grid-cols-4",
};

function Features({ tagline, heading, subheading, columns, items }: FeaturesProps) {
  return (
    <section className="bg-background py-20 md:py-28">
      <div className="container mx-auto max-w-7xl px-6">
        <div className="mx-auto mb-16 max-w-2xl text-center">
          {tagline ? (
            <p className="mb-3 text-xs uppercase tracking-[0.2em] text-muted-foreground">
              {tagline}
            </p>
          ) : null}
          <Typography variant="h2">{heading}</Typography>
          {subheading ? (
            <Typography variant="subtitle1" className="mt-3">
              {subheading}
            </Typography>
          ) : null}
        </div>

        <div className={`grid grid-cols-1 gap-x-10 gap-y-12 ${colClass[columns]}`}>
          {items.map((item, i) => (
            <div key={i} className="border-t border-border pt-6">
              <p className="mb-3 text-xs tracking-[0.18em] text-muted-foreground">
                {String(i + 1).padStart(2, "0")}
              </p>
              <Typography variant="h5">{item.title}</Typography>
              <Typography variant="body2" className="mt-3 text-muted-foreground">
                {item.body}
              </Typography>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

export const featuresEditor: ComponentConfig<FeaturesProps> = {
  label: "Features",
  icon: <Sparkles size={16} />,
  category: "content",
  defaultProps: {
    tagline: "Why us",
    heading: "Built with intention",
    subheading: "A small set of values that shape every piece we make.",
    columns: "3",
    items: [
      {
        title: "Natural fibers",
        body: "Linen, organic cotton, and merino — sourced from mills with traceable supply chains.",
      },
      {
        title: "Small batches",
        body: "Made in considered quantities so nothing goes to waste — and nothing gets discounted into the bin.",
      },
      {
        title: "Built to last",
        body: "Reinforced seams, double-stitched edges, and finishes that age into something better.",
      },
    ],
  },
  fields: {
    tagline: { label: "Tagline", type: "text", contentEditable: true },
    heading: { label: "Heading", type: "text", contentEditable: true },
    subheading: { label: "Subheading", type: "textarea", contentEditable: true },
    columns: {
      label: "Columns",
      type: "select",
      options: [
        { label: "2 columns", value: "2" },
        { label: "3 columns", value: "3" },
        { label: "4 columns", value: "4" },
      ],
    },
    items: {
      label: "Items",
      type: "array",
      defaultItemProps: { title: "Feature", body: "Description." },
      getItemSummary: (it) => it?.title || "Feature",
      arrayFields: {
        title: { label: "Title", type: "text", contentEditable: true },
        body: { label: "Body", type: "textarea", contentEditable: true },
      },
    },
  },
  render: (props) => <Features {...props} />,
};
