'use client';

import { ReservationList, type ReservationRow } from '@/components/reservations/reservation-list';

interface ClientReservationsTabProps {
  clientId: string;
  activeReservations: Array<{
    id: string;
    berthId: string;
    yachtId: string;
    startDate: string | Date;
    tenureType: string;
    status: string;
  }>;
}

export function ClientReservationsTab({
  clientId,
  activeReservations,
}: ClientReservationsTabProps) {
  const rows: ReservationRow[] = activeReservations.map((r) => ({
    id: r.id,
    berthId: r.berthId,
    portId: '', // not rendered by ReservationList
    clientId,
    yachtId: r.yachtId,
    status: r.status as ReservationRow['status'],
    startDate: typeof r.startDate === 'string' ? r.startDate : r.startDate.toISOString(),
    endDate: null,
    tenureType: r.tenureType,
    contractFileId: null,
    notes: null,
    createdAt: '',
  }));

  return (
    <div className="space-y-4">
      <div>
        <h3 className="text-sm font-medium">Active reservations</h3>
        <p className="text-xs text-muted-foreground mt-0.5">
          Showing currently active reservations. History is coming soon.
        </p>
      </div>
      <ReservationList
        reservations={rows}
        showBerth
        emptyMessage="This client has no active reservations."
      />
    </div>
  );
}