import type { ReactNode } from "react";
import Link from "next/link";
import { formatDateRange } from "@/lib/utils";

interface ProfileTripRowProps {
  href: string;
  title: string;
  mountain: string;
  date: Date;
  endDate: Date | null;
  rightSlot?: ReactNode;
}

export function ProfileTripRow({
  href,
  title,
  mountain,
  date,
  endDate,
  rightSlot,
}: ProfileTripRowProps) {
  return (
    <Link
      href={href}
      className="flex items-center justify-between gap-3 rounded-xl border border-neutral-200 bg-white px-3 py-2.5 transition-colors hover:border-primary-200 hover:bg-primary-50/40 sm:px-4 sm:py-3"
    >
      <div className="min-w-0 flex-1">
        <p className="truncate text-sm font-semibold text-neutral-800">{title}</p>
        <p className="truncate text-xs text-neutral-500">{mountain}</p>
        <p className="mt-0.5 text-[11px] text-neutral-400 sm:text-xs">
          {formatDateRange(date, endDate)}
        </p>
      </div>
      {rightSlot && (
        <div className="shrink-0 text-right text-xs font-medium">{rightSlot}</div>
      )}
    </Link>
  );
}