import Link from 'next/link';
import type { Park } from '@/types/api';

interface ParkCardProps {
  park: Park;
}

function getStatusBadgeClass(status: string): string {
  const statusClasses = {
    OPERATING: 'bg-green-100 text-green-800',
    CLOSED_TEMP: 'bg-yellow-100 text-yellow-800',
    CLOSED_PERM: 'bg-red-100 text-red-800',
    UNDER_CONSTRUCTION: 'bg-blue-100 text-blue-800',
    DEMOLISHED: 'bg-gray-100 text-gray-800',
    RELOCATED: 'bg-purple-100 text-purple-800'
  };
  return statusClasses[status as keyof typeof statusClasses] || 'bg-gray-100 text-gray-500';
}

export function ParkCard({ park }: ParkCardProps) {
  const statusClass = getStatusBadgeClass(park.status);
  const formattedStatus = park.status.replace(/_/g, ' ');

  return (
    <div className="overflow-hidden transition-transform transform bg-white rounded-lg shadow-lg dark:bg-gray-800 hover:-translate-y-1">
      <div className="p-4">
        <h2 className="mb-2 text-xl font-bold">
          <Link
            href={`/parks/${park.slug}`}
            className="text-gray-900 hover:text-blue-600 dark:text-white dark:hover:text-blue-400"
          >
            {park.name}
          </Link>
        </h2>

        <div className="flex flex-wrap gap-2">
          <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${statusClass}`}>
            {formattedStatus}
          </span>
        </div>

        {park.owner && (
          <div className="mt-4 text-sm">
            <Link
              href={`/companies/${park.owner.slug}`}
              className="text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
            >
              {park.owner.name}
            </Link>
          </div>
        )}
      </div>
    </div>
  );
}