import { useState } from 'react';
import { Calendar } from 'react-modular-datepicker';
import 'react-modular-datepicker/dist/index.css';

export function HeaderFooterDemo() {
  const [selected, setSelected] = useState<Date | null>(new Date());
  const [currentDate, setCurrentDate] = useState<Date>(new Date());

  const handleSelectToday = () => {
    const today = new Date();
    setSelected(today);
    setCurrentDate(today);
  };

  const handleClear = () => {
    setSelected(null);
  };

  return (
    <Calendar
      date={currentDate}
      selected={selected || undefined}
      onChange={(val) => setSelected(val as Date)}
      onMonthChange={(dates) => setCurrentDate(dates[0])}
      header={
        <div className="px-4 py-3 text-slate-950 flex items-center justify-between rounded-t-lg">
          <span className="text-xs font-bold tracking-wide flex items-center gap-2">
            <span className="text-sm">📅</span> Appointment Booking
          </span>
          <span className="text-[11px] font-medium text-slate-300 bg-slate-800 px-2 py-0.5 rounded-full">
            Step 1 of 2
          </span>
        </div>
      }
      classNames={{
        root: 'min-w-[320px]'
      }}
      footer={
        <div className="px-4 py-3 text-slate-950 flex items-center justify-between rounded-b-lg text-xs">
          <div className="flex-1 min-w-0 h-5 flex items-center pr-2">
            {selected ? (
              <span className="font-medium truncate">
                Selected: <strong className="font-bold ml-2 text-slate-950">{selected.toLocaleDateString()}</strong>
              </span>
            ) : (
              <span className="italic truncate">No date selected</span>
            )}
          </div>
          <div className="flex items-center gap-2 shrink-0">
            <button
              type="button"
              onClick={handleSelectToday}
              className="px-2.5 py-1 text-xs font-semibold rounded bg-[#c5a059] text-slate-950 hover:bg-amber-400 transition-colors cursor-pointer"
            >
              Today
            </button>
            <button
              type="button"
              onClick={handleClear}
              className="px-2.5 py-1 text-xs font-semibold rounded border border-slate-700 bg-slate-800 text-slate-200 hover:bg-slate-700 transition-colors cursor-pointer"
            >
              Clear
            </button>
          </div>
        </div>
      }
    />
  );
}