Footer

import { Footer } from "@/registry/ui/Footer";
import { Home, FileText, Mail, HelpCircle, Shield } from "lucide-react";

const basicSections = [
  {
    title: "Navegação",
    links: [
      { label: "Início", href: "/", icon: Home },
      { label: "Sobre", href: "/about", icon: FileText },
      { label: "Contato", href: "/contact", icon: Mail }
    ]
  },
  {
    title: "Suporte",
    links: [
      { label: "Ajuda", href: "/help", icon: HelpCircle },
      { label: "Política de Privacidade", href: "/privacy", icon: Shield }
    ]
  }
];

<FooterStandalone 
  brandName="Minha App"
  description="Uma aplicação simples e moderna."
  sections={basicSections}
  version="1.0.0"
/>

const statusReportSections = [
  {
    title: "Contato",
    links: [
      {
        label: "contato@hollow-ui.dev",
        href: "mailto:contato@hollow-ui.dev",
        icon: Mail,
        title: "Enviar email"
      },
      {
        label: "(11) 99999-9999",
        href: "tel:+5511999999999",
        icon: Phone,
        title: "Ligar"
      }
    ]
  },
  {
    title: "Legal",
    links: [
      {
        label: "Termos de Uso",
        href: "/termos-de-uso",
        icon: FileText,
        external: true,
        title: "Termos de Uso"
      },
      {
        label: "LGPD",
        href: "https://www.privacidade.com.br/portal",
        icon: ShieldCheck,
        external: true,
        title: "Lei Geral de Proteção de Dados"
      }
    ]
  }
];

<FooterStandalone 
  brandName="hollow-UI"
  description="Sistema de gestão e monitoramento."
  sections={statusReportSections}
  version="1.0.0"
/>

const socialSections = [
  {
    title: "Produto",
    links: [
      { label: "Recursos", href: "/features", icon: Settings },
      { label: "Preços", href: "/pricing", icon: FileText },
      { label: "Suporte", href: "/support", icon: HelpCircle }
    ]
  },
  {
    title: "Redes Sociais",
    links: [
      { 
        label: "GitHub", 
        href: "https://github.com", 
        icon: Github, 
        external: true,
        title: "Seguir no GitHub"
      },
      { 
        label: "Twitter", 
        href: "https://twitter.com", 
        icon: Twitter, 
        external: true,
        title: "Seguir no Twitter"
      }
    ]
  }
];

<FooterStandalone 
  brandName="SocialApp"
  description="Conecte-se com pessoas ao redor do mundo."
  sections={socialSections}
  version="2.1.4"
/>

<FooterStandalone 
  logo={
    <div className="w-8 h-8 bg-white/20 rounded-lg flex items-center justify-center">
      <span className="text-white font-bold text-lg">C</span>
    </div>
  }
  brandName="CustomBrand"
  description="Soluções personalizadas para seu negócio."
  sections={[
    {
      title: "Empresa",
      links: [
        { label: "Sobre nós", href: "/about", icon: User },
        { label: "Carreiras", href: "/careers", icon: FileText }
      ]
    }
  ]}
  copyrightText="© 2024 CustomBrand Ltd. Todos os direitos reservados."
  backgroundColor="bg-blue-600"
/>

<FooterStandalone 
  brandName="MinimalApp"
  description="Simplicidade em primeiro lugar."
  sections={[]}
/>

interface FooterLink {
  /** Label do link */
  label: string;
  /** URL ou path do link */
  href: string;
  /** Ícone do Lucide React */
  icon?: LucideIcon;
  /** Se verdadeiro, abre em nova aba */
  external?: boolean;
  /** Título do link (tooltip) */
  title?: string;
}

interface FooterSection {
  /** Título da seção */
  title: string;
  /** Array de links da seção */
  links: FooterLink[];
}

interface FooterProps {
  /** Logo do footer (path ou JSX) */
  logo?: string | React.ReactNode;
  /** Nome da empresa/aplicação */
  brandName?: string;
  /** Descrição da empresa/aplicação */
  description?: string;
  /** Array de seções do footer */
  sections?: FooterSection[];
  /** Texto de copyright personalizado */
  copyrightText?: string;
  /** Versão da aplicação */
  version?: string;
  /** Cor de fundo personalizada */
  backgroundColor?: string;
  /** Classes CSS adicionais */
  className?: string;
}