
'use client'

import { Phone, ArrowRight } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { useToast } from '@/hooks/use-toast'

interface InteractiveButtonsProps {
  variant?: 'hero' | 'header' | 'footer' | 'pricing'
  className?: string
}

export default function InteractiveButtons({ variant = 'hero', className = '' }: InteractiveButtonsProps) {
  const { toast } = useToast()

  const handlePhoneClick = () => {
    const phoneNumber = '89854891619'
    const telUrl = `tel:${phoneNumber}`
    
    // Try to make a phone call on mobile devices
    if (window?.navigator?.userAgent?.match(/Mobile|Android|iPhone|iPad/)) {
      window.location.href = telUrl
    } else {
      // Copy to clipboard on desktop
      navigator.clipboard?.writeText(phoneNumber).then(() => {
        toast({
          title: "Номер скопирован!",
          description: "8(985)489-16-19 скопирован в буфер обмена",
        })
      }).catch(() => {
        // Fallback: show alert if clipboard API is not available
        alert('Номер телефона: 8(985)489-16-19')
      })
    }
  }

  const scrollToContact = () => {
    const contactSection = document.getElementById('contact-section')
    if (contactSection) {
      contactSection.scrollIntoView({ 
        behavior: 'smooth',
        block: 'start'
      })
    }
  }

  const scrollToContactForm = () => {
    const contactForm = document.getElementById('contact-form')
    if (contactForm) {
      contactForm.scrollIntoView({ 
        behavior: 'smooth',
        block: 'center'
      })
    }
  }

  if (variant === 'hero') {
    return (
      <div className={`flex flex-col sm:flex-row gap-3 sm:gap-4 justify-center ${className}`}>
        <Button 
          size="lg" 
          className="bg-blue-600 hover:bg-blue-700 text-white px-6 sm:px-8 py-3 sm:py-4 text-base sm:text-lg w-full sm:w-auto"
          onClick={handlePhoneClick}
        >
          <Phone className="mr-2 h-4 w-4 sm:h-5 sm:w-5" />
          8(985)489-16-19
        </Button>
        <Button 
          size="lg" 
          variant="outline" 
          className="border-white text-white bg-transparent hover:bg-blue-500 hover:text-white hover:border-blue-500 px-6 sm:px-8 py-3 sm:py-4 text-base sm:text-lg w-full sm:w-auto transition-all"
          onClick={scrollToContact}
        >
          Получить консультацию
          <ArrowRight className="ml-2 h-4 w-4 sm:h-5 sm:w-5" />
        </Button>
      </div>
    )
  }

  if (variant === 'pricing') {
    return (
      <Button 
        className={`w-full mt-6 bg-blue-600 hover:bg-blue-700 ${className}`}
        onClick={scrollToContactForm}
      >
        Заказать
      </Button>
    )
  }

  return null
}
