import React, { useState, useEffect } from 'react';
  import axios from 'axios';
  import { Form } from 'react-bootstrap';

  const Filter01 = ({ setFilterValue }) => {
    const [data, setData] = useState([]);
    const [selectedItemId, setSelectedItemId] = useState('');
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);

    useEffect(() => {
      axios.get('http://5.34.198.87:8000/api/options/uainstruments')
        .then(response => {
          setData(response.data.data);
        })
        .catch(error => {
          setError(error);
        })
        .finally(() => {
          setLoading(false);
        });
    }, []);

    const handleSelectChange = (event) => {
      const selectedId = event.target.value;
      setSelectedItemId(selectedId);
      setFilterValue(selectedId); // Set the selectedId as the filter value
    };

    if (loading) {
      return <p>Loading...</p>;
    }

    if (error) {
      return <p>Error: {error.message}</p>;
    }

    if (data.length === 0) {
      return <p>No data available.</p>;
    }

    return (
  <div className="text-right ">
    <span className="mr-2 text-right float-right ms-3">نماد سهم پایه</span>
    <div className="flex items-center justify-end mb-3 w-[7%] ml-auto m-1">
      <Form.Select
        className="w-48 text-center"
        value={selectedItemId}
        onChange={handleSelectChange}
      >
        <option value=""> </option>
        {data.map((item) => (
          <option key={item.ua_instrument_id} value={item.ua_instrument_id}>
            {item.ua_instrument_symbol_fa}
          </option>
        ))}
      </Form.Select>
    </div>
  </div>
);

  };

  export default Filter01;