"use client";

import { useState, useEffect } from 'react';
import { format } from 'date-fns';

interface DateRangePickerProps {
  value: {
    from: Date;
    to: Date;
  };
  onChange: (range: { from: Date; to: Date }) => void;
}

export function DateRangePicker({ value, onChange }: DateRangePickerProps) {
  const [from, setFrom] = useState(format(value.from, 'yyyy-MM-dd'));
  const [to, setTo] = useState(format(value.to, 'yyyy-MM-dd'));

  useEffect(() => {
    setFrom(format(value.from, 'yyyy-MM-dd'));
    setTo(format(value.to, 'yyyy-MM-dd'));
  }, [value]);

  const handleFromChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const newFrom = e.target.value;
    setFrom(newFrom);
    onChange({
      from: new Date(newFrom),
      to: value.to
    });
  };

  const handleToChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const newTo = e.target.value;
    setTo(newTo);
    onChange({
      from: value.from,
      to: new Date(newTo)
    });
  };

  return (
    <div className="flex items-center space-x-4">
      <div>
        <label htmlFor="from" className="block text-sm font-medium text-gray-500 mb-1">
          From
        </label>
        <input
          type="date"
          id="from"
          value={from}
          onChange={handleFromChange}
          max={to}
          className="block w-full px-3 py-2 bg-white border border-gray-300 rounded-md text-sm text-gray-900 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
        />
      </div>
      <div>
        <label htmlFor="to" className="block text-sm font-medium text-gray-500 mb-1">
          To
        </label>
        <input
          type="date"
          id="to"
          value={to}
          onChange={handleToChange}
          min={from}
          className="block w-full px-3 py-2 bg-white border border-gray-300 rounded-md text-sm text-gray-900 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
        />
      </div>
    </div>
  );
}