"use client";

import { Phone } from 'lucide-react';
import { Organization } from '@/types/organization/organization';

interface CustomerSupportButtonProps {
  organization?: Organization | null;
}

/**
 * Customer Support Button Component
 * Inline button that opens WhatsApp support
 */
export function CustomerSupportButton({ 
  organization
}: CustomerSupportButtonProps) {
  
  const handleClick = () => {
    // Get WhatsApp URL from organization
    const whatsappUrl = organization?.social_media?.whatsapp_url;
    
    if (!whatsappUrl) {
      // Fallback: try to use phone number
      const phone = organization?.phone?.replace(/\D/g, ''); // Remove non-digits
      if (phone) {
        const message = encodeURIComponent("Hi, I need assistance with the charging station.");
        window.open(`https://wa.me/${phone}?text=${message}`, '_blank', 'noopener,noreferrer');
      } else {
        // No contact info available
        alert('Contact information not available. Please visit the support page.');
      }
      return;
    }
    
    // Open WhatsApp URL
    window.open(whatsappUrl, '_blank', 'noopener,noreferrer');
  };

  return (
    <button
      onClick={handleClick}
      className="
        w-full flex items-center justify-center gap-3
        bg-brand-600 hover:bg-brand-700 active:bg-brand-800
        text-white font-medium
        px-6 py-4 rounded-lg
        transition-all duration-200
        shadow-lg hover:shadow-xl
        active:scale-95
      "
      aria-label="Request customer support via WhatsApp"
    >
      <Phone className="w-5 h-5" />
      <span>Request Customer Support</span>
    </button>
  );
}