"use client";
import React, { useState } from 'react';
import { format } from 'date-fns';

export function CalendarDateRangePicker() {
  const [dateRange, setDateRange] = useState({ 
    startDate: new Date(), 
    endDate: new Date() 
  });

  return (
    <div className="flex items-center gap-2">
      <button 
        className="px-3 py-1 border rounded"
        onClick={() => {
          const date = new Date(prompt("Enter start date (YYYY-MM-DD)") || dateRange.startDate);
          setDateRange(prev => ({ ...prev, startDate: date }));
        }}
      >
        Start: {format(dateRange.startDate, 'MMM dd, yyyy')}
      </button>
      <span>to</span>
      <button 
        className="px-3 py-1 border rounded"
        onClick={() => {
          const date = new Date(prompt("Enter end date (YYYY-MM-DD)") || dateRange.endDate);
          setDateRange(prev => ({ ...prev, endDate: date }));
        }}
      >
        End: {format(dateRange.endDate, 'MMM dd, yyyy')}
      </button>
    </div>
  );
}