import Link from "next/link";
import { formatRupiah, formatDate } from "@/lib/utils";

interface TripCardProps {
  id: string;
  title: string;
  mountain: string;
  location: string;
  date: Date | string;
  price: number;
  maxParticipants: number;
  participantCount: number;
  organizerName: string;
  status: string;
}

export function TripCard({
  id,
  title,
  mountain,
  location,
  date,
  price,
  maxParticipants,
  participantCount,
  organizerName,
  status,
}: TripCardProps) {
  const spotsLeft = maxParticipants - participantCount;

  return (
    <Link href={`/trips/${id}`} className="group block">
      <div className="rounded-2xl border border-neutral-200 bg-white p-5 transition-all group-hover:-translate-y-0.5 group-hover:shadow-lg group-hover:shadow-neutral-200/60">
        {/* Header */}
        <div className="mb-3 flex items-start justify-between">
          <div>
            <h3 className="font-bold text-neutral-800 group-hover:text-primary-700">
              {title}
            </h3>
            <p className="mt-0.5 text-sm text-neutral-500">{mountain}</p>
          </div>
          <span
            className={`rounded-full px-2.5 py-0.5 text-xs font-semibold ${
              status === "OPEN"
                ? "bg-primary-100 text-primary-700"
                : status === "FULL"
                ? "bg-amber-100 text-amber-700"
                : "bg-neutral-100 text-neutral-500"
            }`}
          >
            {status}
          </span>
        </div>

        {/* Info */}
        <div className="space-y-1.5 text-sm text-neutral-600">
          <div className="flex items-center gap-1.5">
            <span className="text-secondary-500">📍</span> {location}
          </div>
          <div className="flex items-center gap-1.5">
            <span className="text-secondary-500">📅</span> {formatDate(date)}
          </div>
          <div className="flex items-center gap-1.5">
            <span className="text-secondary-500">👤</span> {organizerName}
          </div>
        </div>

        {/* Footer */}
        <div className="mt-4 flex items-center justify-between border-t border-neutral-100 pt-3">
          <span className="text-lg font-bold text-primary-600">
            {formatRupiah(price)}
          </span>
          <span
            className={`text-xs font-semibold ${
              spotsLeft > 0 ? "text-secondary-600" : "text-amber-600"
            }`}
          >
            {spotsLeft > 0 ? `${spotsLeft} slot tersisa` : "Penuh"}
          </span>
        </div>
      </div>
    </Link>
  );
}