import Image from "next/image";
import Link from "next/link";
import { formatRupiah, formatDateRange } from "@/lib/utils";

interface TripCardProps {
  id: string;
  title: string;
  mountain: string;
  location: string;
  date: Date | string;
  endDate?: Date | string | null;
  price: number;
  maxParticipants: number;
  participantCount: number;
  organizerName: string;
  status: string;
  coverImage?: string | null;
  priority?: boolean;
}

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

  return (
    <Link href={`/trips/${id}`} className="group block">
      <div className="overflow-hidden rounded-2xl border border-neutral-200 bg-white transition-all group-hover:-translate-y-0.5 group-hover:shadow-lg group-hover:shadow-neutral-200/60">
        {/* Cover Image */}
        <div className="relative h-40 bg-neutral-800">
          {coverImage ? (
            <Image
              src={coverImage}
              alt={title}
              fill
              className="object-cover transition-transform group-hover:scale-105"
              sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
              priority={priority}
            />
          ) : (
            <div className="flex h-full items-center justify-center bg-linear-to-br from-primary-800 to-secondary-900">
              <span className="text-4xl">🏔️</span>
            </div>
          )}
          <span
            className={`absolute right-3 top-3 rounded-full px-2.5 py-0.5 text-xs font-bold backdrop-blur-sm ${
              status === "OPEN"
                ? "bg-primary-600/80 text-white"
                : status === "FULL"
                ? "bg-amber-500/80 text-white"
                : "bg-neutral-600/80 text-neutral-200"
            }`}
          >
            {status}
          </span>
        </div>

        {/* Content */}
        <div className="p-4">
          <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 className="mt-3 space-y-1 text-sm text-neutral-600">
            <div className="flex items-center gap-1.5">
              <span className="text-xs text-secondary-500">📍</span> {location}
            </div>
            <div className="flex items-center gap-1.5">
              <span className="text-xs text-secondary-500">📅</span>{" "}
              {formatDateRange(date, endDate)}
            </div>
            <div className="flex items-center gap-1.5">
              <span className="text-xs text-secondary-500">👤</span>{" "}
              {organizerName}
            </div>
          </div>

          <div className="mt-3 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>
      </div>
    </Link>
  );
}