import { Facebook, Instagram } from 'lucide-react';
import Link from 'next/link';
import { Logo } from './Logo';

const WhatsappIcon = (props: React.SVGProps<SVGSVGElement>) => (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="currentColor"
      stroke="none"
      {...props}
    >
      <path d="M12.04 2c-5.46 0-9.91 4.45-9.91 9.91 0 1.75.46 3.5 1.32 5l-1.26 4.6 4.7-1.23c1.44.82 3.08 1.26 4.74 1.26h.01c5.46 0 9.91-4.45 9.91-9.91s-4.45-9.91-9.91-9.91M17.22 14.25c-.21.4-.73.78-1.57.92s-1.42.02-2.12-.19c-.7-.21-1.52-.72-2.2-1.46s-1.15-1.59-1.34-2.26c-.19-.67-.18-1.26.04-1.8.22-.54.66-.85.99-.92.33-.07.67-.07.96.08.29.15.42.34.53.58.11.24.13.5.08.68-.05.18-.13.31-.22.42-.1.11-.2.2-.3.27s-.18.15-.24.23c-.06.08-.09.15-.05.27.04.12.26.49.62.84.36.35.7.63.89.73s.35.15.5.08c.15-.07.45-.35.58-.56.13-.21.28-.23.48-.16.2.07.9.43 1.05.5s.25.12.28.18c.03.06.03.34-.18.74Z"/>
    </svg>
);


export function Footer() {
  const socialLinks = [
    { name: 'Facebook', icon: Facebook, href: 'https://www.facebook.com/Point.caraz/?locale=es_LA' },
    { name: 'Instagram', icon: Instagram, href: 'https://www.instagram.com/pointcaraz/' },
    { name: 'WhatsApp 1', icon: WhatsappIcon, href: 'https://wa.me/51960531304' },
    { name: 'WhatsApp 2', icon: WhatsappIcon, href: 'https://wa.me/51930384428' },
  ];

  return (
    <footer className="border-t border-border/40 bg-background/95">
      <div className="container mx-auto px-4 py-8">
        <div className="flex flex-col md:flex-row justify-between items-center gap-6">
          <div className="flex-shrink-0">
            <Logo />
          </div>
          <p className="text-sm text-muted-foreground">
            &copy; {new Date().getFullYear()} POINT. Todos los derechos reservados.
          </p>
          <div className="flex items-center gap-4">
            {socialLinks.map((social) => (
              <Link key={social.name} href={social.href} target="_blank" rel="noopener noreferrer">
                <social.icon className="h-6 w-6 text-muted-foreground transition-colors hover:text-accent" />
                <span className="sr-only">{social.name}</span>
              </Link>
            ))}
          </div>
        </div>
      </div>
    </footer>
  );
}