import { cn } from "@/lib/utils";

type ItemType = { src: string; text: string; className?: string };

const list1: ItemType[] = [
  {
    src: "/block-media/shadcnblocks/block/logos/brave-icon.svg",
    text: "Brave",
  },
  {
    src: "/block-media/shadcnblocks/block/logos/facebook-icon.svg",
    text: "Facebook",
  },
  {
    src: "/block-media/shadcnblocks/block/logos/figma-icon.svg",
    text: "Figma",
  },
  {
    src: "/block-media/shadcnblocks/block/logos/gatsby-icon.svg",
    text: "Gatsby",
  },
  {
    src: "/block-media/shadcnblocks/block/logos/astro-icon.svg",
    text: "Astro",
  },
  {
    src: "/block-media/shadcnblocks/block/logos/linkedin-icon.svg",
    text: "LinkedIn",
  },
  {
    src: "/block-media/shadcnblocks/block/logos/notion-icon.svg",
    text: "Notion",
  },
  {
    src: "",
    text: "",
    className: "bg-linear-to-br from-yellow-500 to-yellow-300",
  },
];

const list2: ItemType[] = [
  {
    src: "",
    text: "",
    className: "bg-linear-to-br from-green-500 to-green-300",
  },
  {
    src: "/block-media/shadcnblocks/block/logos/spotify-icon.svg",
    text: "Spotify",
  },
  {
    src: "/block-media/shadcnblocks/block/logos/google-icon.svg",
    text: "Google",
  },
  {
    src: "/block-media/shadcnblocks/block/logos/sketch-icon.svg",
    text: "Sketch",
  },
  {
    src: "/block-media/shadcnblocks/block/logos/producthunt-icon.svg",
    text: "معرفی محصول",
  },
  {
    src: "/block-media/shadcnblocks/block/logos/slack-icon.svg",
    text: "Slack",
  },
  {
    src: "/block-media/shadcnblocks/block/logos/x.svg",
    text: "X / شبکه اجتماعی",
  },
  {
    src: "/block-media/shadcnblocks/block/logos/netflix-icon.svg",
    text: "Netflix",
  },
];

const List = ({ list }: { list: ItemType[] }) => {
  return (
    <div className="flex gap-3">
      {list.map((item, i) =>
        item.src ? (
          <div
            className="inline-flex h-10 shrink-0 items-center gap-2 rounded-full bg-muted p-1"
            key={`list-item-${i}`}
          >
            <div className="flex size-8 overflow-hidden rounded-full bg-background p-2">
              <img
                src={item.src}
                alt={item.text}
                className="m-auto block size-full object-contain object-center"
              />
            </div>
            <p className="pe-2 text-sm font-medium">{item.text}</p>
          </div>
        ) : (
          <div
            className={`h-10 w-[6.25rem] shrink-0 rounded-full ${item?.className}`}
            key={`list-item-${i}`}
            aria-hidden
          />
        ),
      )}
    </div>
  );
};

interface Integration7Props {
  className?: string;
}

const Integration7 = ({ className }: Integration7Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="grid w-full grid-cols-1 items-start justify-between overflow-hidden rounded-3xl border border-muted bg-background pe-0 md:grid-cols-[minmax(18.75rem,25rem)_1fr] md:p-8">
          <div className="order-2 flex flex-col gap-2 p-6 pt-10 text-start md:order-1 md:p-0">
            <h3 className="text-lg leading-relaxed font-medium tracking-tight">
              با ابزارهای شما به‌صورت یکپارچه متصل می‌شود!
            </h3>
            <p className="text-sm leading-relaxed tracking-tight text-muted-foreground">
              منابع داده متنوع را متصل کنید تا هوش و عملکرد دستیار شما تقویت
              شود.
            </p>
          </div>
          <div className="relative order-1 p-4 pb-0 md:order-2 md:p-0">
            <List list={list1} />
            <div className="ms-8 pt-3">
              <List list={list2} />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Integration7 };