import React, { useState } from "react";

export const WeatherModePanel: React.FC = () => {
  const [weatherType, setWeatherType] = useState("sunny");

  return (
    <div className='bg-gray-800 p-2 rounded-md mb-2'>
      <h2 className='text-white text-sm font-medium mb-1'>Weather-Responsive Wallpapers</h2>
      <p className='text-gray-400 text-xs mb-1'>
        Generate wallpapers that reflect current or selected weather conditions.
      </p>

      <div>
        <label htmlFor='weather-type-select' className='block text-white text-xs mb-1'>
          Weather Type
        </label>
        <select
          id='weather-type-select'
          value={weatherType}
          onChange={(e) => setWeatherType(e.target.value)}
          className='w-full p-1 rounded bg-gray-700 text-white border border-gray-600 focus:border-indigo-500 focus:outline-none text-sm'
        >
          <option value='sunny'>Sunny</option>
          <option value='cloudy'>Cloudy</option>
          <option value='rainy'>Rainy</option>
          <option value='snowy'>Snowy</option>
          <option value='foggy'>Foggy</option>
          <option value='stormy'>Stormy</option>
        </select>
      </div>
    </div>
  );
};