import type { ReactNode } from "react";
import Link from "next/link";
import { formatTripCalendarDateRangeLong } from "@/lib/trip-dates";

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

export function ProfileTripRow({
  href,
  title,
  destination,
  date,
  endDate,
  rightSlot,
}: ProfileTripRowProps) {
  return (
    <div 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">
      <Link href={href} 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">{destination}</p>
        <p className="mt-0.5 text-[11px] text-neutral-400 sm:text-xs">
          {formatTripCalendarDateRangeLong(date, endDate)}
        </p>
      </Link>
      {rightSlot && (
        <div className="shrink-0 text-right text-xs font-medium">{rightSlot}</div>
      )}
    </div>
  );
}