import { HttpTypes } from "@medusajs/types"
import React from "react"

type OptionSelectProps = {
  option: HttpTypes.StoreProductOption
  current: string | undefined
  updateOption: (title: string, value: string) => void
  title: string
  disabled: boolean
  "data-testid"?: string
}

const OptionSelect: React.FC<OptionSelectProps> = ({
  option,
  current,
  updateOption,
  title,
  "data-testid": dataTestId,
  disabled,
}) => {
  const filteredOptions = (option.values ?? []).map((v) => v.value)

  return (
    <div className="flex flex-col gap-2">
      <span className="text-xs font-black uppercase tracking-widest text-gray-500">
        {title}
      </span>
      <div className="flex flex-wrap gap-2" data-testid={dataTestId}>
        {filteredOptions.map((v) => (
          <button
            key={v}
            onClick={() => updateOption(option.id, v)}
            disabled={disabled}
            data-testid="option-button"
            className={`px-4 py-2 rounded-xl text-sm font-bold border-2 transition-all ${
              v === current
                ? "border-[#7B4A2A] bg-[#7B4A2A] text-yellow-400 shadow-[2px_2px_0px_rgba(0,0,0,0.2)]"
                : "border-gray-200 bg-white text-black hover:border-[#7B4A2A] hover:text-[#7B4A2A]"
            } disabled:opacity-40`}
          >
            {v}
          </button>
        ))}
      </div>
    </div>
  )
}

export default OptionSelect