Icons (아이콘)

import {
  Calendar,
  Clock,
  CheckCircle,
  AlertCircle,
  XCircle,
} from "lucide-react";
import { Badge } from "@vortex/ui-cals";
 
export default function BookingStatus() {
  return (
    <div className="space-y-md">
      {/* 예약 가능 */}
      <div className="flex items-center gap-md p-md bg-green-50 border-green-200 border rounded">
        <CheckCircle size={24} className="text-[#4caf50]" />
        <div>
          <h4 className="font-semibold">예약 가능</h4>
          <p className="text-sm text-gray-600">지금 바로 예약하세요</p>
        </div>
      </div>
 
      {/* 예약 대기 */}
      <div className="flex items-center gap-md p-md bg-orange-50 border-orange-200 border rounded">
        <Clock size={24} className="text-[#ff9800]" />
        <div>
          <h4 className="font-semibold">예약 대기</h4>
          <p className="text-sm text-gray-600">결제 대기 중입니다</p>
        </div>
      </div>
 
      {/* 예약 확정 */}
      <div className="flex items-center gap-md p-md bg-blue-50 border-blue-200 border rounded">
        <Calendar size={24} className="text-[#03a9f4]" />
        <div>
          <h4 className="font-semibold">예약 확정</h4>
          <p className="text-sm text-gray-600">예약이 확정되었습니다</p>
        </div>
      </div>
 
      {/* 예약 취소 */}
      <div className="flex items-center gap-md p-md bg-red-50 border-red-200 border rounded">
        <XCircle size={24} className="text-[#f44336]" />
        <div>
          <h4 className="font-semibold">예약 취소</h4>
          <p className="text-sm text-gray-600">예약이 취소되었습니다</p>
        </div>
      </div>
    </div>
  );
}