'use client'

import React, { useState } from 'react'

interface ExportMenuProps {
  onExport: (format: 'csv' | 'pdf', hours: number) => void
}

const ExportMenu: React.FC<ExportMenuProps> = ({ onExport }) => {
  const [selectedFormat, setSelectedFormat] = useState<'csv' | 'pdf'>('csv')
  const [selectedHours, setSelectedHours] = useState<number>(168) // default: week

  const handleExport = () => {
    onExport(selectedFormat, selectedHours)
  }

  return (
    <div className="flex items-center gap-3 bg-[#161824] rounded-lg p-3 border border-gray-700">
      <div className="flex items-center gap-2">
        <label className="flex items-center gap-1">
          <input
            type="radio"
            name="format"
            value="csv"
            checked={selectedFormat === 'csv'}
            onChange={(e) => setSelectedFormat(e.target.value as 'csv' | 'pdf')}
            className="w-3 h-3 text-blue-600"
          />
          <span className="text-gray-300 text-sm">CSV</span>
        </label>
        
        <label className="flex items-center gap-1">
          <input
            type="radio"
            name="format"
            value="pdf"
            checked={selectedFormat === 'pdf'}
            onChange={(e) => setSelectedFormat(e.target.value as 'csv' | 'pdf')}
            className="w-3 h-3 text-blue-600"
          />
          <span className="text-gray-300 text-sm">PDF</span>
        </label>
      </div>

      <div className="flex items-center gap-2 ml-4">
        <span className="text-gray-300 text-sm">Период:</span>
        <select
          className="bg-[#0e111a] text-gray-200 border border-gray-700 rounded px-2 py-1 text-sm"
          value={selectedHours}
          onChange={(e) => setSelectedHours(Number(e.target.value))}
        >
          <option value={24}>1 день</option>
          <option value={72}>3 дня</option>
          <option value={168}>Неделя</option>
          <option value={720}>Месяц</option>
        </select>
      </div>
      
      <button
        onClick={handleExport}
        className="px-3 py-1 bg-blue-600 hover:bg-blue-700 text-white text-sm rounded transition-colors"
      >
        Экспорт
      </button>
    </div>
  )
}

export default ExportMenu