18. Planer podróży

{
  "trips": [
    {
      "id": "trip-001",
      "destination": "Rzym, Włochy",
      "startDate": "2025-06-15",
      "endDate": "2025-06-22",
      "status": "planned",
      "coverImage": "https://...",
      "checklist": [
        { "id": "cl-1", "text": "Paszport", "checked": true, "category": "Dokumenty" },
        { "id": "cl-2", "text": "Ubezpieczenie podróżne", "checked": false, "category": "Dokumenty" }
      ],
      "budget": {
        "total": 3000,
        "spent": 0,
        "currency": "PLN",
        "expenses": []
      },
      "itinerary": [
        {
          "date": "2025-06-15",
          "activities": [
            { "id": "act-1", "time": "14:00", "title": "Lot Warszawa → Rzym", "type": "transport" }
          ]
        }
      ]
    }
  ]
}

function useDaysUntil(targetDate) {
  const target = new Date(targetDate);
  const today = new Date();
  today.setHours(0, 0, 0, 0);
  target.setHours(0, 0, 0, 0);

  const diffMs = target - today;
  const diffDays = Math.ceil(diffMs / (1000 * 60 * 60 * 24));

  if (diffDays < 0) return { days: Math.abs(diffDays), status: 'past' };
  if (diffDays === 0) return { days: 0, status: 'today' };
  return { days: diffDays, status: 'upcoming' };
}

function ChecklistProgress({ items }) {
  const checked = items.filter((i) => i.checked).length;
  const total = items.length;
  const percentage = total > 0 ? Math.round((checked / total) * 100) : 0;

  return (
    <div className="checklist-progress">
      <span>{checked}/{total} ({percentage}%)</span>
      <div className="progress-bar">
        <div className="progress-fill" style={{ width: `${percentage}%` }} />
      </div>
    </div>
  );
}