Footer

import { ComponentProps } from "react"

// next
import Link from "next/link"

// third-party
import { cn } from "cn"

// project-imports
import branding from "@/branding.json"
import Logo from "@/components/uiable/layout/shared/logo"

// assets
import {
  IconBrandDiscord,
  IconBrandGithub,
  IconBrandX,
} from "@tabler/icons-react"

interface FooterProps extends ComponentProps<"footer"> {
  containerClassName?: string
  showGradient?: boolean
}

const navLinks = [
  { href: "/components", label: "Components" },
  { href: "/pricing", label: "Pricing" },
  { href: "/doc/introduction", label: "Documentation" },
  { href: "/legal/privacy", label: "Privacy" },
  { href: "/legal/terms", label: "Terms" },
  { href: "/legal/license", label: "License" },
  { href: "/legal/imprint", label: "Legal Notice" },
]

const socialLinks = [
  { Icon: IconBrandX, href: branding.company.socialLink.x, label: "Twitter" },
  {
    Icon: IconBrandDiscord,
    href: branding.company.socialLink.discord,
    label: "Discord",
  },
  {
    Icon: IconBrandGithub,
    href: branding.company.socialLink.github,
    label: "Github",
  },
]

//  ------------------------------ | LAYOUT - FOOTER | ------------------------------  //

export default function Footer({
  className,
  containerClassName,
  showGradient = true,
  ...props
}: FooterProps) {
  return (
    <footer
      style={
        showGradient
          ? {
              background:
                "linear-gradient(to top, var(--primary) -180%, var(--background) 95%)",
            }
          : undefined
      }
      className={cn("w-full", className)}
      {...props}
    >
      <div
        className={cn(
          "container mx-auto flex flex-col gap-8 border-border/60 px-4 py-10 sm:px-8 md:flex-row md:items-center md:justify-between",
          containerClassName
        )}
      >
        <div className="flex flex-col gap-3">
          <div className="flex items-center gap-2.5">
            <Logo />
          </div>

          <p className="text-base leading-6 font-normal text-foreground">
            v1.0.0 | Built by{" "}
            <Link
              href={branding.company.url}
              target="_blank"
              rel="noopener noreferrer"
              className="text-primary hover:underline"
            >
              {branding.company.name}
            </Link>
          </p>
        </div>

        <div className="flex flex-col items-start gap-5 sm:flex-row sm:items-center md:items-center">
          <nav className="flex flex-wrap items-center gap-x-6 gap-y-2">
            {navLinks.map(({ href, label }) => (
              <Link
                key={href}
                href={href}
                className="font-sans text-base leading-6 font-normal text-foreground transition hover:text-primary"
              >
                {label}
              </Link>
            ))}
          </nav>

          <div
            aria-hidden="true"
            className="hidden h-6 w-px bg-border sm:block"
          />

          <div className="flex items-center gap-2.5">
            {socialLinks.map(({ Icon, href, label }) => (
              <Link
                key={label}
                href={href}
                target="_blank"
                rel="noopener noreferrer"
                aria-label={label}
                className="flex h-10 w-10 items-center justify-center rounded-full bg-card text-foreground transition-colors hover:bg-muted dark:hover:bg-muted"
              >
                <Icon aria-hidden="true" className="size-4.5" />
              </Link>
            ))}
          </div>
        </div>
      </div>
    </footer>
  )
}