import React from 'react';

interface AlertsToolbarProps {
  forecastDay: 1 | 3 | 7;
  onForecastDayChange: (day: 1 | 3 | 7) => void;
  isFullscreen: boolean;
  onToggleFullscreen: () => void;
  onExportCsv: () => void;
  onExportJson: () => void;
}

// Toolbar Row 1: 网格预测时效 + 全屏 + 导出.
export const AlertsToolbar = React.memo(function AlertsToolbar({
  forecastDay,
  onForecastDayChange,
  isFullscreen,
  onToggleFullscreen,
  onExportCsv,
  onExportJson,
}: AlertsToolbarProps) {
  return (
    <div className="card p-3 mb-3">
      <div className="flex items-center gap-3 flex-wrap">
        <div className="flex items-center gap-2">
          <span className="text-[12px] text-text-muted">网格预测：</span>
          <div className="flex gap-0.5 bg-bg-page p-0.5 rounded">
            {([1, 3, 7] as const).map((day) => (
              <button
                key={day}
                onClick={() => onForecastDayChange(day)}
                className={`px-3 py-1 text-[12px] font-medium rounded transition-colors ${
                  forecastDay === day
                    ? 'bg-bg-card text-primary shadow-sm'
                    : 'text-text-secondary hover:text-text-primary'
                }`}
              >
                {day}天
              </button>
            ))}
          </div>
        </div>

        <div className="w-px h-6 bg-border" />

        <button
          onClick={onToggleFullscreen}
          className={`px-3 py-1.5 text-[12px] font-medium rounded transition-colors ${
            isFullscreen
              ? 'bg-bg-card text-primary border border-primary'
              : 'bg-bg-page text-text-secondary border border-border'
          }`}
        >
          {isFullscreen ? '退出全屏' : '全屏'}
        </button>

        <div className="w-px h-6 bg-border" />

        <button
          onClick={onExportCsv}
          className="px-3 py-1.5 text-[12px] font-medium rounded bg-bg-page text-text-secondary border border-border hover:border-primary transition-colors"
        >
          导出CSV
        </button>
        <button
          onClick={onExportJson}
          className="px-3 py-1.5 text-[12px] font-medium rounded bg-bg-page text-text-secondary border border-border hover:border-primary transition-colors"
        >
          导出JSON
        </button>
      </div>
    </div>
  );
});