---
import type { HTMLAttributes } from "astro/types";
import { tv } from "tailwind-variants";
import GitIcon from "@tabler/icons/outline/brand-git.svg";

interface Props extends HTMLAttributes<"footer"> {
  siteName?: string;
  description?: string;
  copyright?: string;
  socialLinks?: {
    label: string;
    href: string;
    icon: string;
  }[];
}

const footerStyles = tv({
  base: "border-t border-border/50 bg-muted/20",
});

const {
  siteName = "Resuely",
  description = "Apps web gratuitas y simples para el día a día.",
  copyright = `© ${new Date().getFullYear()} ${siteName}. Todos los derechos reservados.`,
  socialLinks = [
    { label: "Código", href: "https://git.rlugo.dev/resuely", icon: "icon-git" },
  ],
  class: className,
  ...rest
} = Astro.props;
---

<footer class={footerStyles({ class: className })} {...rest}>
  <div class="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
    <div class="flex flex-col items-center justify-between gap-6 sm:flex-row">
      <div class="text-center sm:text-left">
        <p class="text-sm font-semibold text-foreground">{siteName}</p>
        <p class="mt-1 text-sm text-muted-foreground">{description}</p>
      </div>
      
      <div class="flex items-center gap-4">
        {socialLinks.map((link) => (
          <a
            href={link.href}
            target="_blank"
            rel="noopener noreferrer"
            aria-label={link.label}
            class="text-muted-foreground hover:text-foreground transition-colors rounded-md p-2 hover:bg-background/60"
          >
            <span class="sr-only">{link.label}</span>
            {link.icon === "icon-git" && <GitIcon class="size-5" />}
          </a>
        ))}
      </div>
    </div>
    
    <div class="mt-8 border-t border-border/50 pt-8 text-center">
      <p class="text-sm text-muted-foreground">{copyright}</p>
    </div>
  </div>
</footer>
