import React from "react";
import { FaFacebook, FaInstagram, FaLinkedin, FaTwitter } from "react-icons/fa";

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

interface Footer7Props {
  logo?: {
    url: string;
    src: string;
    alt: string;
    title: string;
  };
  className?: string;
  sections?: Array<{
    title: string;
    links: Array<{ name: string; href: string }>;
  }>;
  description?: string;
  socialLinks?: Array<{
    icon: React.ReactElement;
    href: string;
    label: string;
  }>;
  copyright?: string;
  legalLinks?: Array<{
    name: string;
    href: string;
  }>;
}

const defaultSections = [
  {
    title: "محصول",
    links: [
      { name: "فضای کاری", href: "#" },
      { name: "قیمت‌گذاری", href: "#" },
      { name: "پروژه‌ها", href: "#" },
      { name: "بورد وظایف", href: "#" },
    ],
  },
  {
    title: "شرکت",
    links: [
      { name: "درباره ما", href: "#" },
      { name: "تیم", href: "#" },
      { name: "وبلاگ", href: "#" },
      { name: "فرصت‌های شغلی", href: "#" },
    ],
  },
  {
    title: "منابع",
    links: [
      { name: "مرکز راهنما", href: "#" },
      { name: "قالب‌های تیم", href: "#" },
      { name: "مطالعات موردی", href: "#" },
      { name: "حریم خصوصی", href: "#" },
    ],
  },
];

const defaultSocialLinks = [
  { icon: <FaInstagram className="size-5" />, href: "#", label: "اینستاگرام" },
  { icon: <FaFacebook className="size-5" />, href: "#", label: "فیسبوک" },
  { icon: <FaTwitter className="size-5" />, href: "#", label: "توییتر" },
  { icon: <FaLinkedin className="size-5" />, href: "#", label: "لینکدین" },
];

const defaultLegalLinks = [
  { name: "شرایط و ضوابط", href: "#" },
  { name: "حریم خصوصی", href: "#" },
];

const Footer7 = ({
  logo = {
    url: "https://www.ShadcnBlocks",
    src: "/block-media/shadcnblocks/block/logos/ShadcnBlockscom-icon.svg",
    alt: "لوگوی تیم‌هاوز",
    title: "TeamHaus",
  },
  sections = defaultSections,
  description = "فضای کاری یکپارچه برای پروژه‌ها، گفت‌وگوها و تحویل به‌موقع.",
  socialLinks = defaultSocialLinks,
  copyright = "© ۱۴۰۴ TeamHaus. تمامی حقوق محفوظ است.",
  legalLinks = defaultLegalLinks,
  className,
}: Footer7Props) => {
  return (
    <section className={cn("py-32", className)}>
      <div className="container">
        <div className="flex w-full flex-col justify-between gap-10 lg:flex-row lg:items-start lg:text-start">
          <div className="flex w-full flex-col justify-between gap-6 lg:items-start">
            {/* Logo */}
            <div className="flex items-center gap-2 lg:justify-start">
              <a href={logo.url}>
                <img
                  src={logo.src}
                  alt={logo.alt}
                  title={logo.title}
                  className="h-8"
                />
              </a>
              <h2 className="text-xl font-semibold">{logo.title}</h2>
            </div>
            <p className="max-w-[70%] text-sm text-muted-foreground">
              {description}
            </p>
            <ul className="flex items-center gap-6 text-muted-foreground">
              {socialLinks.map((social, idx) => (
                <li key={idx} className="font-medium hover:text-primary">
                  <a href={social.href} aria-label={social.label}>
                    {social.icon}
                  </a>
                </li>
              ))}
            </ul>
          </div>
          <div className="grid w-full gap-6 md:grid-cols-3 lg:gap-20">
            {sections.map((section, sectionIdx) => (
              <div key={sectionIdx}>
                <h3 className="mb-4 font-bold">{section.title}</h3>
                <ul className="space-y-3 text-sm text-muted-foreground">
                  {section.links.map((link, linkIdx) => (
                    <li
                      key={linkIdx}
                      className="font-medium hover:text-primary"
                    >
                      <a href={link.href}>{link.name}</a>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </div>
        <div className="mt-8 flex flex-col justify-between gap-4 border-t py-8 text-xs font-medium text-muted-foreground md:flex-row md:items-center md:text-start">
          <p className="order-2 lg:order-1">{copyright}</p>
          <ul className="order-1 flex flex-col gap-2 md:order-2 md:flex-row">
            {legalLinks.map((link, idx) => (
              <li key={idx} className="hover:text-primary">
                <a href={link.href}> {link.name}</a>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  );
};

export { Footer7 };