import { Logo, LogoImage, LogoText } from "@/components/shadcnblocks/logo";
import { cn } from "@/lib/utils";

interface MenuItem {
  title: string;
  links: {
    text: string;
    url: string;
  }[];
}

interface Footer2Props {
  logo?: {
    url: string;
    src: string;
    alt: string;
    title: string;
  };
  className?: string;
  tagline?: string;
  menuItems?: MenuItem[];
  copyright?: string;
  bottomLinks?: {
    text: string;
    url: string;
  }[];
}

const Footer2 = ({
  logo = {
    src: "/block-media/shadcnblocks/block/block-1.svg",
    alt: "لوگوی کمپین‌فلو",
    title: "CampaignFlow",
    url: "https://www.ShadcnBlocks",
  },
  className,
  tagline = "کمپین‌ها را خودکار کنید؛ تبدیل را افزایش دهید.",
  menuItems = [
    {
      title: "محصول",
      links: [
        { text: "نمای کلی", url: "#" },
        { text: "قیمت‌گذاری", url: "#" },
        { text: "گردش‌کار کمپین", url: "#" },
        { text: "بخش‌بندی مخاطب", url: "#" },
        { text: "یکپارچه‌سازی‌ها", url: "#" },
        { text: "گزارش عملکرد", url: "#" },
      ],
    },
    {
      title: "شرکت",
      links: [
        { text: "درباره ما", url: "#" },
        { text: "تیم", url: "#" },
        { text: "وبلاگ", url: "#" },
        { text: "فرصت‌های شغلی", url: "#" },
        { text: "تماس با فروش", url: "#" },
        { text: "حریم خصوصی", url: "#" },
      ],
    },
    {
      title: "منابع",
      links: [
        { text: "مرکز راهنما", url: "#" },
        { text: "قالب‌های کمپین", url: "#" },
        { text: "مطالعات موردی", url: "#" },
      ],
    },
    {
      title: "شبکه‌های اجتماعی",
      links: [
        { text: "توییتر", url: "#" },
        { text: "اینستاگرام", url: "#" },
        { text: "لینکدین", url: "#" },
      ],
    },
  ],
  copyright = "© ۱۴۰۴ CampaignFlow. تمامی حقوق محفوظ است.",
  bottomLinks = [
    { text: "شرایط و ضوابط", url: "#" },
    { text: "حریم خصوصی", url: "#" },
  ],
}: Footer2Props) => {
  return (
    <section className={cn("py-32", className)}>
      <div className="container">
        <footer>
          <div className="grid grid-cols-2 gap-8 lg:grid-cols-6">
            <div className="col-span-2 mb-8 lg:mb-0">
              <div className="flex items-center gap-2 lg:justify-start">
                <Logo url="https://ShadcnBlocks">
                  <LogoImage
                    src={logo.src}
                    alt={logo.alt}
                    title={logo.title}
                    className="h-10 dark:invert"
                  />
                  <LogoText className="text-xl">{logo.title}</LogoText>
                </Logo>
              </div>
              <p className="mt-4 font-bold">{tagline}</p>
            </div>
            {menuItems.map((section, sectionIdx) => (
              <div key={sectionIdx}>
                <h3 className="mb-4 font-bold">{section.title}</h3>
                <ul className="space-y-4 text-muted-foreground">
                  {section.links.map((link, linkIdx) => (
                    <li
                      key={linkIdx}
                      className="font-medium hover:text-primary"
                    >
                      <a href={link.url}>{link.text}</a>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
          <div className="mt-24 flex flex-col justify-between gap-4 border-t pt-8 text-sm font-medium text-muted-foreground md:flex-row md:items-center">
            <p>{copyright}</p>
            <ul className="flex gap-4">
              {bottomLinks.map((link, linkIdx) => (
                <li key={linkIdx} className="underline hover:text-primary">
                  <a href={link.url}>{link.text}</a>
                </li>
              ))}
            </ul>
          </div>
        </footer>
      </div>
    </section>
  );
};

export { Footer2 };