interface TripProgramBlockProps {
  meetingPoint: string | null;
  itinerary: string | null;
  whatsIncluded: string | null;
  whatsExcluded: string | null;
}

export function TripProgramBlock({
  meetingPoint,
  itinerary,
  whatsIncluded,
  whatsExcluded,
}: TripProgramBlockProps) {
  const hasAny =
    meetingPoint || itinerary || whatsIncluded || whatsExcluded;
  if (!hasAny) return null;

  return (
    <div className="space-y-4 rounded-xl border border-neutral-200 bg-neutral-50/50 p-4 sm:p-5">
      <h2 className="text-xs font-bold text-neutral-800 sm:text-sm">
        Detail perjalanan
      </h2>

      {meetingPoint && (
        <div>
          <h3 className="mb-1 text-[11px] font-bold uppercase tracking-wide text-primary-700 sm:text-xs">
            Meeting point
          </h3>
          <p className="whitespace-pre-wrap text-xs leading-relaxed text-neutral-700 sm:text-sm">
            {meetingPoint}
          </p>
        </div>
      )}

      {itinerary && (
        <div>
          <h3 className="mb-1 text-[11px] font-bold uppercase tracking-wide text-primary-700 sm:text-xs">
            Itinerary
          </h3>
          <p className="whitespace-pre-wrap text-xs leading-relaxed text-neutral-700 sm:text-sm">
            {itinerary}
          </p>
        </div>
      )}

      {(whatsIncluded || whatsExcluded) && (
        <div className="grid gap-4 sm:grid-cols-2">
          {whatsIncluded && (
            <div className="rounded-lg border border-secondary-200 bg-white p-3">
              <h3 className="mb-2 text-[11px] font-bold uppercase tracking-wide text-secondary-800 sm:text-xs">
                Termasuk
              </h3>
              <p className="whitespace-pre-wrap text-xs leading-relaxed text-neutral-700 sm:text-sm">
                {whatsIncluded}
              </p>
            </div>
          )}
          {whatsExcluded && (
            <div className="rounded-lg border border-neutral-200 bg-white p-3">
              <h3 className="mb-2 text-[11px] font-bold uppercase tracking-wide text-neutral-600 sm:text-xs">
                Tidak termasuk
              </h3>
              <p className="whitespace-pre-wrap text-xs leading-relaxed text-neutral-700 sm:text-sm">
                {whatsExcluded}
              </p>
            </div>
          )}
        </div>
      )}
    </div>
  );
}