"use client";

import { useState, useEffect } from 'react';
import { Phone } from 'lucide-react';
import { I18N_NAV } from '@/config/i18nNav';
import type { Locale } from '@/config/i18nRoutes';

interface StickyMobileCTAProps {
  locale?: Locale;
  label?: string;
  href?: string;
  phoneHref?: string;
}

const StickyMobileCTA = ({
  locale = 'fr',
  label,
  href,
  phoneHref = 'tel:+33000000000',
}: StickyMobileCTAProps) => {
  const dict = I18N_NAV[locale].stickyCta;
  const ctaLabel = label ?? dict.label;
  const ctaHref = href ?? dict.href;
  const [visible, setVisible] = useState(false);

  useEffect(() => {
    const onScroll = () => setVisible(window.scrollY > 600);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  if (!visible) return null;

  return (
    <div className="lg:hidden fixed bottom-0 left-0 right-0 z-50 p-3 bg-card/95 backdrop-blur-md border-t border-border flex items-center gap-2">
      <a
        href={ctaHref}
        className="flex-1 cta-gradient text-white font-semibold py-3 rounded-full text-center text-sm"
      >
        {ctaLabel}
      </a>
      <a
        href={phoneHref}
        className="flex-shrink-0 w-12 h-12 rounded-lg bg-primary flex items-center justify-center text-white"
      >
        <Phone className="w-5 h-5" />
      </a>
    </div>
  );
};

export default StickyMobileCTA;