import { ComponentConfig } from "@reacteditor/core";
import { Award } from "lucide-react";

export type LogosProps = {
  tagline: string;
  items: Array<{ src: string; alt: string }>;
  layout: "row" | "marquee";
};

function Logos({ tagline, items, layout }: LogosProps) {
  return (
    <section className="border-y border-border bg-muted/40 py-12">
      <div className="container mx-auto max-w-7xl px-6">
        {tagline ? (
          <p className="mb-8 text-center text-xs uppercase tracking-[0.2em] text-muted-foreground">
            {tagline}
          </p>
        ) : null}
        {layout === "marquee" ? (
          <div className="overflow-hidden">
            <div className="flex animate-[marquee_30s_linear_infinite] gap-16 [--gap:4rem]">
              {[...items, ...items].map((it, i) => (
                <img
                  key={i}
                  src={it.src}
                  alt={it.alt}
                  className="h-7 w-auto opacity-60 grayscale"
                />
              ))}
            </div>
          </div>
        ) : (
          <div className="flex flex-wrap items-center justify-center gap-x-12 gap-y-6">
            {items.map((it, i) => (
              <img
                key={i}
                src={it.src}
                alt={it.alt}
                className="h-7 w-auto opacity-60 grayscale"
              />
            ))}
          </div>
        )}
      </div>
    </section>
  );
}

export const logosEditor: ComponentConfig<LogosProps> = {
  label: "Press / Logos",
  icon: <Award size={16} />,
  category: "content",
  defaultProps: {
    tagline: "As seen in",
    layout: "row",
    items: [
      { src: "https://logo.clearbit.com/vogue.com", alt: "Vogue" },
      { src: "https://logo.clearbit.com/highsnobiety.com", alt: "Highsnobiety" },
      { src: "https://logo.clearbit.com/gq.com", alt: "GQ" },
      { src: "https://logo.clearbit.com/dezeen.com", alt: "Dezeen" },
      { src: "https://logo.clearbit.com/wallpaper.com", alt: "Wallpaper*" },
    ],
  },
  fields: {
    tagline: { label: "Tagline", type: "text", contentEditable: true },
    layout: {
      label: "Layout",
      type: "radio",
      options: [
        { label: "Row", value: "row" },
        { label: "Marquee", value: "marquee" },
      ],
    },
    items: {
      label: "Logos",
      type: "array",
      defaultItemProps: { src: "", alt: "" },
      getItemSummary: (it) => it?.alt || "Logo",
      arrayFields: {
        src: { label: "Image URL", type: "text" },
        alt: { label: "Alt text", type: "text", contentEditable: true },
      },
    },
  },
  render: (props) => <Logos {...props} />,
};
