'use client';

import Link from 'next/link';

interface FooterProps {
  appName?: string;
  copyrightText?: string;
  supportPhone?: string;
  whatsappNumber?: string;
  telegramLink?: string;
  facebookLink?: string;
  youtubeLink?: string;
  contactEmail?: string;
}

export function Footer({
  appName = 'Gaming Tournament',
  copyrightText = '© 2024 Gaming Tournament Platform. All rights reserved.',
  supportPhone,
  whatsappNumber,
  telegramLink,
  facebookLink,
  youtubeLink,
  contactEmail,
}: FooterProps) {
  return (
    <footer className="bg-slate-900 border-t border-slate-800 mt-20">
      <div className="container-max py-16">
        <div className="grid grid-cols-1 md:grid-cols-4 gap-8 mb-12">
          {/* About */}
          <div>
            <h3 className="text-lg font-bold mb-4 gradient-text">{appName}</h3>
            <p className="text-slate-400 text-sm leading-relaxed">
              পেশাদার গেমিং টুর্নামেন্ট প্ল্যাটফর্ম যেখানে খেলোয়াড়রা প্রতিযোগিতা করে এবং পুরস্কার জিতে।
            </p>
          </div>

          {/* Quick Links */}
          <div>
            <h4 className="font-semibold mb-4 text-slate-100">দ্রুত লিংক</h4>
            <ul className="space-y-2 text-sm">
              <li>
                <Link href="/tournaments" className="text-slate-400 hover:text-orange-500 transition">
                  টুর্নামেন্ট
                </Link>
              </li>
              <li>
                <Link href="/leaderboard" className="text-slate-400 hover:text-orange-500 transition">
                  লিডারবোর্ড
                </Link>
              </li>
              <li>
                <Link href="/how-to-play" className="text-slate-400 hover:text-orange-500 transition">
                  কীভাবে খেলবেন
                </Link>
              </li>
              <li>
                <Link href="/support" className="text-slate-400 hover:text-orange-500 transition">
                  সাপোর্ট
                </Link>
              </li>
            </ul>
          </div>

          {/* Policies */}
          <div>
            <h4 className="font-semibold mb-4 text-slate-100">নীতিমালা</h4>
            <ul className="space-y-2 text-sm">
              <li>
                <Link href="/terms" className="text-slate-400 hover:text-orange-500 transition">
                  শর্তাবলী
                </Link>
              </li>
              <li>
                <Link href="/privacy" className="text-slate-400 hover:text-orange-500 transition">
                  গোপনীয়তা নীতি
                </Link>
              </li>
              <li>
                <Link href="/refund" className="text-slate-400 hover:text-orange-500 transition">
                  রিফান্ড নীতি
                </Link>
              </li>
              <li>
                <Link href="/fair-play" className="text-slate-400 hover:text-orange-500 transition">
                  ন্যায্য খেলা নিয়ম
                </Link>
              </li>
            </ul>
          </div>

          {/* Contact */}
          <div>
            <h4 className="font-semibold mb-4 text-slate-100">যোগাযোগ</h4>
            <ul className="space-y-3 text-sm">
              {supportPhone && (
                <li>
                  <a
                    href={`tel:${supportPhone}`}
                    className="text-slate-400 hover:text-orange-500 transition flex items-center gap-2"
                  >
                    <span className="text-orange-500">📞</span> {supportPhone}
                  </a>
                </li>
              )}
              {contactEmail && (
                <li>
                  <a
                    href={`mailto:${contactEmail}`}
                    className="text-slate-400 hover:text-orange-500 transition flex items-center gap-2"
                  >
                    <span className="text-orange-500">✉️</span> {contactEmail}
                  </a>
                </li>
              )}
              {whatsappNumber && (
                <li>
                  <a
                    href={`https://wa.me/${whatsappNumber}`}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="text-slate-400 hover:text-orange-500 transition flex items-center gap-2"
                  >
                    <span className="text-green-500">💬</span> WhatsApp
                  </a>
                </li>
              )}
            </ul>
          </div>
        </div>

        {/* Social Media */}
        <div className="py-8 border-t border-slate-800">
          <div className="flex justify-center gap-6 mb-6">
            {facebookLink && (
              <a
                href={facebookLink}
                target="_blank"
                rel="noopener noreferrer"
                className="w-10 h-10 bg-slate-800 hover:bg-blue-600 rounded-lg flex items-center justify-center transition"
                title="Facebook"
              >
                f
              </a>
            )}
            {youtubeLink && (
              <a
                href={youtubeLink}
                target="_blank"
                rel="noopener noreferrer"
                className="w-10 h-10 bg-slate-800 hover:bg-red-600 rounded-lg flex items-center justify-center transition"
                title="YouTube"
              >
                ▶
              </a>
            )}
            {telegramLink && (
              <a
                href={telegramLink}
                target="_blank"
                rel="noopener noreferrer"
                className="w-10 h-10 bg-slate-800 hover:bg-blue-500 rounded-lg flex items-center justify-center transition"
                title="Telegram"
              >
                ✈
              </a>
            )}
          </div>

          {/* Copyright */}
          <p className="text-center text-slate-500 text-sm">{copyrightText}</p>
          <p className="text-center text-slate-600 text-xs mt-2">
            This platform is not officially affiliated with Garena Free Fire or any game publisher.
          </p>
        </div>
      </div>
    </footer>
  );
}