import React from 'react';
import { type Service } from '../types';
import { Globe, X } from 'lucide-react';

interface ServiceCardProps {
  service: Service;
  onDelete: (id: string) => void;
}

const ServiceCard: React.FC<ServiceCardProps> = ({ service, onDelete }) => {
  const IconComponent = typeof service.icon === 'string' ? Globe : service.icon;

  const handleDelete = (e: React.MouseEvent<HTMLButtonElement>) => {
    e.preventDefault();
    e.stopPropagation();
    if (window.confirm(`Are you sure you want to delete ${service.name}?`)) {
      onDelete(service.id);
    }
  };

  return (
    <a
      href={service.url}
      target="_blank"
      rel="noopener noreferrer"
      className="group relative block p-6 bg-gray-800 rounded-lg shadow-lg hover:shadow-2xl hover:bg-gray-700 transition-all duration-300 transform hover:-translate-y-1"
    >
      <button
        onClick={handleDelete}
        className="absolute top-2 right-2 p-1.5 bg-gray-700/50 text-gray-400 rounded-full hover:bg-red-500/50 hover:text-white opacity-0 group-hover:opacity-100 transition-opacity focus:opacity-100 z-10"
        aria-label={`Delete ${service.name}`}
      >
        <X className="h-4 w-4" />
      </button>

      <div className="flex items-center mb-4">
        <div className="p-3 bg-gray-900 rounded-lg mr-4">
          <IconComponent className="h-6 w-6 text-teal-400" />
        </div>
        <h3 className="text-lg font-semibold text-gray-100 truncate">{service.name}</h3>
      </div>
      <p className="text-sm text-gray-400 h-10 overflow-hidden">
        {service.description}
      </p>
    </a>
  );
};

export default ServiceCard;