import { ArrowUpRight } from "lucide-react";

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

interface Footer12Props {
  className?: string;
}

const Footer12 = ({ className }: Footer12Props) => {
  const navigation = [
    { name: "داشبوردها", href: "#" },
    { name: "درباره ما", href: "#" },
    { name: "قیمت‌گذاری", href: "#" },
    { name: "نمونه گزارش‌ها", href: "#" },
    { name: "درخواست دمو", href: "#" },
  ];

  const social = [
    { name: "توییتر", href: "#" },
    { name: "لینکدین", href: "#" },
  ];

  const legal = [{ name: "حریم خصوصی", href: "#" }];

  return (
    <section
      className={cn("flex flex-col items-center gap-14 py-32", className)}
    >
      <nav className="container flex flex-col items-center gap-4">
        <ul className="flex flex-wrap items-center justify-center gap-6">
          {navigation.map((item) => (
            <li key={item.name}>
              <a
                href={item.href}
                className="font-medium transition-opacity hover:opacity-75"
              >
                {item.name}
              </a>
            </li>
          ))}
          {social.map((item) => (
            <li key={item.name}>
              <a
                href={item.href}
                className="flex items-center gap-0.5 font-medium transition-opacity hover:opacity-75"
              >
                {item.name} <ArrowUpRight className="size-4 rtl:rotate-180" />
              </a>
            </li>
          ))}
        </ul>
        <ul className="flex flex-wrap items-center justify-center gap-6">
          {legal.map((item) => (
            <li key={item.name}>
              <a
                href={item.href}
                className="text-sm text-muted-foreground transition-opacity hover:opacity-75"
              >
                {item.name}
              </a>
            </li>
          ))}
        </ul>
      </nav>
      <img
        src="/block-media/shadcnblocks/block/ShadcnBlocks-giant-text.png"
        alt="لوگوی Reportly"
        width={1570}
        height={375}
        className="mt-10 md:mt-14 lg:mt-20"
      />
    </section>
  );
};

export { Footer12 };