"use client";

import { CalendarDays, Clock3, Check } from "lucide-react";
import { formatCurrency } from "@/lib/formatters/currency";
import type { OpenTrip } from "@/types/trip";
import styles from "./TargetScheduleCard.module.css";

interface TargetScheduleCardProps {
  schedule: OpenTrip;
  selected: boolean;
  onSelect: () => void;
}

export default function TargetScheduleCard({ schedule, selected, onSelect }: TargetScheduleCardProps) {
  const isAvailable = schedule.booking?.is_available ?? true;

  return (
    <button
      type="button"
      onClick={onSelect}
      disabled={!isAvailable}
      className={`${styles.card} ${selected ? styles.cardSelected : ""}`}
      id={`target-schedule-${schedule.id}`}
      aria-pressed={selected}
    >
      <div className={styles.info}>
        <div className={styles.dateRow}>
          <CalendarDays size={15} className={styles.dateIcon} aria-hidden />
          <span className={styles.dateText}>{schedule.formatted_date}</span>
        </div>
        <div className={styles.metaRow}>
          <span className={styles.metaItem}>
            <Clock3 size={12} aria-hidden />
            {schedule.duration_days} Hari
          </span>
          <span className={styles.metaItem}>{schedule.schedule_type_label}</span>
          {!isAvailable && <span className={styles.metaClosed}>{schedule.status_label}</span>}
        </div>
      </div>
      <div className={styles.rightCol}>
        <span className={styles.price}>{formatCurrency(schedule.price)}</span>
        <span className={styles.checkCircle} aria-hidden>
          {selected && <Check size={13} strokeWidth={3} />}
        </span>
      </div>
    </button>
  );
}