import dateRangePickerStyles from "~/styles/components/date-range-picker.css?url";

export interface DateRangePickerProps {
  startDate: string;
  endDate: string;
  onStartDateChange: (value: string) => void;
  onEndDateChange: (value: string) => void;
  startLabel?: string;
  endLabel?: string;
  className?: string;
  startId?: string;
  endId?: string;
}

export function links() {
  return [
    { rel: "stylesheet", href: dateRangePickerStyles }
  ];
}

/**
 * 日期范围选择器组件
 * 用于选择日期范围，如开始日期和结束日期
 */
export function DateRangePicker({
  startDate,
  endDate,
  onStartDateChange,
  onEndDateChange,
  startLabel = "从",
  endLabel = "至",
  className = "",
  startId = "date-start",
  endId = "date-end"
}: DateRangePickerProps) {
  return (
    <div className={`date-range-picker ${className}`}>
      <div className="date-range-fields">
        <div className="date-field">
          <label htmlFor={startId} className="date-label">{startLabel}</label>
          <input 
            id={startId}
            type="date" 
            className="date-input" 
            value={startDate}
            onChange={(e) => onStartDateChange(e.target.value)}
          />
        </div>
        <span className="date-separator">至</span>
        <div className="date-field">
          <label htmlFor={endId} className="date-label">{endLabel}</label>
          <input 
            id={endId}
            type="date" 
            className="date-input" 
            value={endDate}
            onChange={(e) => onEndDateChange(e.target.value)}
          />
        </div>
      </div>
    </div>
  );
}

// 简化版日期范围选择器，适用于紧凑布局，不显示标签
export function SimpleDateRangePicker({
  startDate,
  endDate,
  onStartDateChange,
  onEndDateChange,
  className = "",
  startId = "date-start-simple",
  endId = "date-end-simple"
}: Omit<DateRangePickerProps, 'startLabel' | 'endLabel'>) {
  return (
    <div className={`date-range-picker simple-date-range-picker ${className}`}>
      <div className="date-range-fields">
        <input 
          id={startId}
          type="date" 
          className="date-input" 
          value={startDate}
          onChange={(e) => onStartDateChange(e.target.value)}
          aria-label="开始日期"
        />
        <span className="date-separator">至</span>
        <input 
          id={endId}
          type="date" 
          className="date-input" 
          value={endDate}
          onChange={(e) => onEndDateChange(e.target.value)}
          aria-label="结束日期"
        />
      </div>
    </div>
  );
}