"use client";
/* 
  This is the destination dropdown component.
  It contains the following components:
  - DestinationDropdown
*/
import React, { useState } from "react";
import Select from "react-select";

// Define the type for DestinationDropdown options
interface Option {
  value: string;
  label: string;
}

// Define options with type
const options: Option[] = [
  { value: "USA", label: "USA" },
  { value: "SEA", label: "South East Asia" },
  { value: "EU", label: "EU (Schengen)" },
  { value: "AUS_NZ", label: "Australia and NZ" },
  { value: "Europe", label: "Europe" },
];

const DestinationDropdown: React.FC = () => {
  // Code for passing the option dynamically
  const [selectedOption, setSelectedOption] = useState<Option>(options[0]);

  return (
    <div className={`boxWrapper`}>
      <div className={`titleWrapper`}>
        <h6>Destination</h6>
      </div>
      <div className="DropdownMainBox">
        {/* React-Select package component */}
        {<Select
          options={options}
          value={selectedOption}
          onChange={(option) => setSelectedOption(option as Option)}
          className={`customDropdown`}
        />}
      </div>
    </div>
  );

};

export default DestinationDropdown;