import { useState } from 'react';
import { Trash2, Edit2, TrendingUp } from 'lucide-react';

const PackageCard = ({ pkg, onEdit, onDelete, bookingCount }) => {
  return (
    <div className="bg-white rounded-lg border border-gray-200 p-6 hover:shadow-lg transition">
      <div className="flex justify-between items-start mb-4">
        <div>
          <h3 className="text-xl font-bold text-gray-900">{pkg.name}</h3>
          <p className="text-sm text-gray-500">{pkg.description}</p>
        </div>
        {pkg.active && (
          <span className="px-3 py-1 bg-green-100 text-green-700 text-xs font-bold rounded-full">
            Active
          </span>
        )}
      </div>

      <div className="bg-gradient-to-r from-blue-500 to-indigo-600 rounded-lg p-4 mb-4 text-white">
        <div className="text-3xl font-bold">₹{pkg.price}</div>
        <div className="text-sm opacity-90">{pkg.priceUnit}</div>
      </div>

      <div className="space-y-2 mb-4 text-sm text-gray-700">
        <div className="flex items-center">
          <span className="font-semibold w-24">Duration:</span>
          {pkg.duration} hours
        </div>
        <div className="flex items-center">
          <span className="font-semibold w-24">Photos:</span>
          {pkg.deliverables?.numPhotos || 'N/A'} photos
        </div>
        <div className="flex items-center">
          <span className="font-semibold w-24">Edited:</span>
          {pkg.deliverables?.numEdited || 'N/A'} edited
        </div>
        <div className="flex items-center">
          <span className="font-semibold w-24">Locations:</span>
          {pkg.deliverables?.numLocations || 1} location(s)
        </div>
        {pkg.deliverables?.includesAlbum && (
          <div className="flex items-center text-green-600">
            ✓ Includes Album Book
          </div>
        )}
      </div>

      <div className="flex items-center gap-2 mb-4 text-sm text-gray-600">
        <TrendingUp size={16} />
        <span>{bookingCount || 0} bookings</span>
      </div>

      <div className="flex gap-2">
        <button
          onClick={() => onEdit(pkg)}
          className="flex-1 flex items-center justify-center gap-2 bg-blue-50 text-blue-600 hover:bg-blue-100 py-2 rounded-lg font-medium transition"
        >
          <Edit2 size={16} /> Edit
        </button>
        <button
          onClick={() => onDelete(pkg._id)}
          className="flex-1 flex items-center justify-center gap-2 bg-red-50 text-red-600 hover:bg-red-100 py-2 rounded-lg font-medium transition"
        >
          <Trash2 size={16} /> Delete
        </button>
      </div>
    </div>
  );
};

export default PackageCard;