goodgo-platform/apps/web/components/design-system/footer.tsx

import * as React from 'react';
import {
  Building2,
  ExternalLink,
  Mail,
  MapPin,
  Phone,
} from 'lucide-react';
import { cn } from '@/lib/utils';

/* -------------------------------------------------------------------------- */
/*  Types                                                                      */
/* -------------------------------------------------------------------------- */

export interface FooterLinkGroup {
  title: string;
  links: { label: string; href: string }[];
}

export interface FooterProps {
  /** Brand name. */
  brand: string;
  /** Short description below the brand. */
  description: string;
  /** Link groups (2-4 columns). */
  linkGroups: FooterLinkGroup[];
  /** Copyright text. */
  copyright: string;
  /** Contact info. */
  contact?: {
    address?: string;
    phone?: string;
    email?: string;
  };
  /** Social links. */
  socials?: { platform: 'facebook' | 'instagram' | 'youtube'; href: string }[];
  /** Custom link renderer for framework-specific Link. */
  renderLink: (props: {
    href: string;
    children: React.ReactNode;
    className?: string;
  }) => React.ReactNode;
}

/* -------------------------------------------------------------------------- */
/*  Icons                                                                      */
/* -------------------------------------------------------------------------- */

const SOCIAL_ICON: Record<string, React.ElementType> = {
  facebook: ExternalLink,
  instagram: ExternalLink,
  youtube: ExternalLink,
};

/* -------------------------------------------------------------------------- */
/*  Component                                                                  */
/* -------------------------------------------------------------------------- */

export function Footer({
  brand,
  description,
  linkGroups,
  copyright,
  contact,
  socials,
  renderLink,
}: FooterProps) {
  return (
    <footer role="contentinfo" className="border-t border-border bg-background-elevated">
      {/* Main grid */}
      <div className="mx-auto max-w-7xl px-4 py-10 lg:py-12">
        <div className="grid gap-10 sm:grid-cols-2 lg:grid-cols-12">
          {/* Brand column */}
          <div className="lg:col-span-4">
            <div className="flex items-center gap-2">
              <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary text-sm font-bold text-primary-foreground">
                G
              </div>
              <span className="text-lg font-bold tracking-tight text-foreground">
                {brand}
              </span>
            </div>
            <p className="mt-3 max-w-xs text-sm leading-relaxed text-muted-foreground">
              {description}
            </p>

            {/* Contact */}
            {contact && (
              <div className="mt-4 space-y-2 text-sm text-muted-foreground">
                {contact.address && (
                  <div className="flex items-start gap-2">
                    <MapPin className="mt-0.5 h-4 w-4 shrink-0 text-primary" />
                    <span>{contact.address}</span>
                  </div>
                )}
                {contact.phone && (
                  <div className="flex items-center gap-2">
                    <Phone className="h-4 w-4 shrink-0 text-primary" />
                    <a href={`tel:${contact.phone}`} className="hover:text-foreground transition-colors">
                      {contact.phone}
                    </a>
                  </div>
                )}
                {contact.email && (
                  <div className="flex items-center gap-2">
                    <Mail className="h-4 w-4 shrink-0 text-primary" />
                    <a href={`mailto:${contact.email}`} className="hover:text-foreground transition-colors">
                      {contact.email}
                    </a>
                  </div>
                )}
              </div>
            )}

            {/* Socials */}
            {socials && socials.length > 0 && (
              <div className="mt-4 flex gap-2">
                {socials.map((s) => {
                  const Icon = SOCIAL_ICON[s.platform];
                  return (
                    <a
                      key={s.platform}
                      href={s.href}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="inline-flex h-9 w-9 items-center justify-center rounded-md border border-border text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
                    >
                      {Icon && <Icon className="h-4 w-4" />}
                    </a>
                  );
                })}
              </div>
            )}
          </div>

          {/* Link groups */}
          {linkGroups.map((group) => (
            <div key={group.title} className="lg:col-span-2">
              <h3 className="mb-3 text-sm font-semibold text-foreground">{group.title}</h3>
              <ul className="space-y-2.5">
                {group.links.map((link) => (
                  <li key={link.href}>
                    {renderLink({
                      href: link.href,
                      className:
                        'text-sm text-muted-foreground transition-colors hover:text-primary',
                      children: link.label,
                    })}
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </div>

      {/* Bottom bar */}
      <div className="border-t border-border">
        <div className="mx-auto flex max-w-7xl items-center justify-between px-4 py-4">
          <p className="text-xs text-muted-foreground">{copyright}</p>
          <div className="flex items-center gap-1">
            <Building2 className="h-3 w-3 text-muted-foreground" />
            <span className="text-xs text-muted-foreground">
              S&agrave;n giao dịch bất động sản
            </span>
          </div>
        </div>
      </div>
    </footer>
  );
}