import React, { useState } from 'react';
import { Dialog, DialogContent } from '@/components/ui/dialog';
import { Calendar } from '@/components/ui/calendar';
import { Loader2 } from 'lucide-react';

export default function DateRequestDialog({ open, onOpenChange, onSuccess }) {
  const [selectedDate, setSelectedDate] = useState(new Date());

  const disabledDays = [
      { before: new Date() },
  ];

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
         <div className="flex flex-col lg:flex-row gap-6">
            
            <div className="flex-shrink-0 w-full lg:w-auto flex flex-col items-center">
               <h3 className="text-lg font-semibold mb-4 w-full text-center lg:text-left">Select a Date</h3>
               <div className="border rounded-lg p-4 bg-background shadow-sm">
                  <Calendar
                    mode="single"
                    selected={selectedDate}
                    onSelect={setSelectedDate}
                    disabled={disabledDays}
                    className="rounded-md border-0"
                  />
               </div>
               
               <div className="mt-4 grid grid-cols-2 gap-2 text-xs w-full max-w-[300px]">
                   <div className="flex items-center gap-2">
                       <div className="w-3 h-3 rounded bg-destructive/10 border border-destructive/20"></div>
                       <span>Unavailable</span>
                   </div>
                   <div className="flex items-center gap-2">
                       <div className="w-3 h-3 rounded bg-primary border border-primary/50"></div>
                       <span>Selected</span>
                   </div>
               </div>
            </div>

            <div className="flex-1 min-w-0">
               <h3 className="text-lg font-semibold mb-4">Request Details</h3>
               <p className="text-sm text-muted-foreground">
                 Date request form placeholder. Selected date: {selectedDate?.toLocaleDateString()}
               </p>
            </div>
         </div>
      </DialogContent>
    </Dialog>
  );
}
