'use client'

import { useState } from 'react'
import { Modal } from '@/components/Modal'
import { ServiceInfo } from '@/types/services'

export default function ServiceCard(service: ServiceInfo) {
  const [isOpen, setIsOpen] = useState(false)

  return (
    <>
      <div 
        onClick={() => setIsOpen(true)}
        className="bg-white rounded-lg shadow-lg p-6 hover:shadow-xl transition-all duration-200 cursor-pointer border-4 border-blue-100 hover:border-blue-900"
      >
        <div className="flex items-center justify-center mb-4">
          {service.icon}
        </div>
        <h3 className="text-xl font-serif text-blue-900 text-center mb-3">{service.title}</h3>
        <p className="text-gray-600 text-center">{service.shortDescription}</p>
      </div>

      <Modal isOpen={isOpen} onClose={() => setIsOpen(false)}>
        <div className="p-6">
          <h2 className="text-2xl font-serif text-blue-900 mb-4">{service.title}</h2>
          <div className="prose max-w-none">
            {service.longDescription}
          </div>
          <div className="mt-6">
            <h3 className="text-lg font-semibold mb-2">Areas of Expertise:</h3>
            <ul className="list-disc pl-5 space-y-2">
              {service.expertise.map((item, index) => (
                <li key={index} className="text-gray-700">{item}</li>
              ))}
            </ul>
          </div>
        </div>
      </Modal>
    </>
  )
}
