'use client'

import { useState } from 'react'
import { MessageCircle, X } from 'lucide-react'

type ChatWidgetProps = {
  isMobile?: boolean
}

export default function ChatWidget({ isMobile = false }: ChatWidgetProps) {
  const [isOpen, setIsOpen] = useState(false)

  return (
    <div className={isMobile ? 'fixed bottom-6 right-6 z-50' : 'relative'}>
      {isOpen && (
        <div
          className={
            isMobile
              ? 'absolute bottom-16 right-0 w-80 h-96 bg-white rounded-2xl shadow-2xl overflow-hidden flex flex-col'
              : 'absolute top-full right-0 mt-2 w-80 h-96 bg-white rounded-2xl shadow-2xl overflow-hidden flex flex-col z-50'
          }
        >
          <div className="bg-[#FF5722] text-white p-4 flex items-center justify-between">
            <span className="font-semibold text-lg">Let's Chat</span>
            <button
              onClick={() => setIsOpen(false)}
              className="hover:bg-white/20 rounded-full p-1 transition-colors"
            >
              <X size={20} />
            </button>
          </div>
          <div className="flex-1 p-4 overflow-y-auto bg-gray-50">
            <div className="bg-[#FF5722]/10 rounded-lg p-3 text-gray-700">
              <p className="text-sm">Hello! How can we help you today?</p>
            </div>
          </div>
          <div className="p-4 border-t border-gray-200">
            <div className="flex gap-2">
              <input
                type="text"
                placeholder="Type a message..."
                className="flex-1 px-4 py-2 border border-gray-300 rounded-full text-sm focus:outline-none focus:border-[#FF5722] text-gray-800"
              />
              <button className="bg-[#FF5722] text-white px-4 py-2 rounded-full text-sm font-medium hover:bg-[#E64A19] transition-colors">
                Send
              </button>
            </div>
          </div>
        </div>
      )}

      <button
        onClick={() => setIsOpen(!isOpen)}
        className={
          isMobile
            ? 'bg-[#FF5722] hover:bg-[#E64A19] text-white rounded-full p-4 shadow-lg transition-all duration-300 flex items-center gap-2'
            : 'bg-[#FF5722] hover:bg-[#E64A19] text-white rounded-full px-4 py-2 shadow-lg transition-all duration-300 flex items-center gap-2 h-10'
        }
      >
        {isOpen ? (
          <X size={isMobile ? 24 : 20} />
        ) : (
          <>
            <MessageCircle size={isMobile ? 24 : 20} />
            <span className="font-semibold text-sm">Let's Chat</span>
          </>
        )}
      </button>
    </div>
  )
}