import React from "react";

interface SelectOption {
  label: string;
  value: string;
}

interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
  label?: string;
  options: SelectOption[];
}

export function Select({ label, options, className = "", ...props }: SelectProps) {
  return (
    <div className={`flex flex-col gap-1.5 ${className}`}>
      {label && (
        <label className="font-sans text-[13px] text-[var(--p-text)]">
          {label}
        </label>
      )}
      <select
        className="px-3 py-2 bg-[var(--p-chip)] border border-[var(--p-border)] rounded-lg text-[13px] text-[var(--p-text)] font-sans focus:outline-none focus:border-[var(--p-accent)] transition-colors w-full cursor-pointer appearance-none"
        {...props}
      >
        {options.map((opt) => (
          <option key={opt.value} value={opt.value}>
            {opt.label}
          </option>
        ))}
      </select>
    </div>
  );
}
