'use client';
import { Instagram, Facebook, Mail, Phone } from 'lucide-react';
import { useStoreContext } from './StoreThemeProvider';

export function StoreFooter() {
  const { store, theme } = useStoreContext();
  return (
    <footer className="mt-16 border-t border-ink-100 bg-ink-50">
      <div className="mx-auto max-w-5xl px-4 py-10">
        <div className="grid gap-6 sm:grid-cols-3">
          <div>
            <p className="font-display font-semibold text-ink-900">{store.name}</p>
            <p className="mt-1 text-sm text-ink-500">{store.description}</p>
          </div>
          <div className="text-sm text-ink-600">
            <p className="mb-2 font-medium text-ink-900">Contato</p>
            <p className="flex items-center gap-2"><Mail className="h-4 w-4" /> {store.email}</p>
            <p className="flex items-center gap-2"><Phone className="h-4 w-4" /> {store.phone}</p>
          </div>
          <div className="text-sm">
            <p className="mb-2 font-medium text-ink-900">Redes</p>
            <div className="flex gap-3 text-ink-500">
              {store.social.instagram && <Instagram className="h-5 w-5" />}
              {store.social.facebook && <Facebook className="h-5 w-5" />}
            </div>
          </div>
        </div>
        <p className="mt-8 border-t border-ink-200 pt-6 text-center text-xs text-ink-400">
          {theme.footerText || `© ${new Date().getFullYear()} ${store.name}. Todos os direitos reservados.`}
        </p>
      </div>
    </footer>
  );
}