import React from 'react';
import { Calendar } from 'lucide-react';
import { DateRange } from '../types';

interface DateRangePickerProps {
  dateRange: DateRange;
  onChange: (range: DateRange) => void;
}

export const DateRangePicker: React.FC<DateRangePickerProps> = ({ dateRange, onChange }) => {
  const formatDateForInput = (date: Date) => {
    return date.toISOString().split('T')[0];
  };

  const handleStartChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const newStart = new Date(e.target.value);
    if (!isNaN(newStart.getTime())) {
      onChange({ ...dateRange, start: newStart });
    }
  };

  const handleEndChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const newEnd = new Date(e.target.value);
    if (!isNaN(newEnd.getTime())) {
      onChange({ ...dateRange, end: newEnd });
    }
  };

  return (
    <div className="flex items-center gap-2 bg-white dark:bg-dark-bg border border-zinc-200 dark:border-dark-border px-3 py-2 rounded-lg shadow-sm hover:border-zinc-300 dark:hover:border-zinc-700 transition-colors">
      <Calendar size={16} className="text-zinc-500 dark:text-dark-muted shrink-0" />
      <div className="flex items-center gap-2 text-sm">
        <input
          type="date"
          value={formatDateForInput(dateRange.start)}
          onChange={handleStartChange}
          className="bg-transparent text-zinc-700 dark:text-zinc-200 font-medium outline-none cursor-pointer w-28 md:w-auto"
        />
        <span className="text-zinc-400 dark:text-dark-muted">até</span>
        <input
          type="date"
          value={formatDateForInput(dateRange.end)}
          onChange={handleEndChange}
          className="bg-transparent text-zinc-700 dark:text-zinc-200 font-medium outline-none cursor-pointer w-28 md:w-auto"
        />
      </div>
    </div>
  );
};