import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { Select, Typography } from 'antd';
import { setProduct } from '../states/productSlice';
import { RootState } from '../states/store';

const ProductSelector: React.FC = () => {
  const dispatch = useDispatch();
  const productName = useSelector(
    (state: RootState) => state.product.productName
  );

  const handleProductChange = (value: 'DROS' | 'VETDROS') => {
    dispatch(
      setProduct({ productName: value, language: 'en', source: 'Browser' })
    );
  };

  return (
    <div
      style={{
        position: 'absolute',
        top: 16,
        left: '50%',
        transform: 'translateX(-50%)',
        zIndex: 1000,
      }}
    >
      <Typography.Text>Select Product: </Typography.Text>
      <Select
        id="product-select"
        value={productName}
        onChange={handleProductChange}
      >
        <Select.Option value="DROS">DROS</Select.Option>
        <Select.Option value="VETDROS">VETDROS</Select.Option>
      </Select>
    </div>
  );
};

export default ProductSelector;