'use client';

import { Mail, Phone, Headphones, ChevronRight } from 'lucide-react';
import { useEffect, useState } from 'react';
import { useGlobalContext } from '@/context/Provider';
import apis from '@/utils/apis';

export function SupportCard() {
  const { setActiveModal } = useGlobalContext();
  const [config, setConfig] = useState<any>(null);

  useEffect(() => {
    getConfigurationData();
  }, []);

  const getConfigurationData = async () => {
    try {
      const res = await apis.Configuration.getConfiguration();
      const appConfig = res?.data?.[0];
      setConfig(appConfig);
    } catch (err) {
      console.error('Failed to fetch configuration:', err);
    }
  };

  return (
    <div className="space-y-6 rounded-lg bg-white p-6">
      <p className="font-medium text-gray-800">
        Our friendly support team is here to help you.
      </p>

      <div className="space-y-4">
        <div className="flex items-center gap-3">
          <div className="rounded-full bg-[var(--primary-brand)]/5 p-2">
            <Mail className="h-5 w-5 text-[var(--primary-brand)]" />
          </div>
          <div>
            <p className="text-sm font-medium">Email</p>
            <p className="text-sm text-gray-500">
              {config?.support?.email}
            </p>
          </div>
        </div>

        <div className="flex items-center gap-3">
          <div className="rounded-full bg-[var(--primary-brand)]/5 p-2">
            <Phone className="h-5 w-5 text-[var(--primary-brand)]" />
          </div>
          <div>
            <p className="text-sm font-medium">Call</p>
            <p className="text-sm text-gray-500">
              {config?.support?.call}
            </p>
          </div>
        </div>

        <button
          className="flex w-full items-center justify-between rounded-lg py-2 transition-colors hover:bg-gray-50"
          onClick={() => {
            setActiveModal('contact');
          }}
        >
          <div className="flex items-center gap-3">
            <div className="rounded-full bg-[var(--primary-brand)]/5 p-2">
              <Headphones className="h-5 w-5 text-[var(--primary-brand)]" />
            </div>
            <span className="text-sm font-medium">Contact us</span>
          </div>
          <ChevronRight className="h-4 w-4 text-gray-400" />
        </button>
      </div>
    </div>
  );
}