clube67_newwhats.local/clube67/newwhats.local/frontend/components/ui/Select.tsx

import React from 'react';
import { ChevronDown } from 'lucide-react';

interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
  icon?: React.ReactNode;
  label?: string;
  options: { value: string; label: string }[];
  containerClassName?: string;
}

export default function Select({ icon, label, options, containerClassName = '', className = '', ...props }: SelectProps) {
  return (
    <div className={`space-y-1.5 ${containerClassName}`}>
      {label && (
        <label className="text-xs font-bold text-slate-500 uppercase tracking-widest flex items-center gap-2 ml-1">
          {icon}
          {label}
        </label>
      )}
      <div className="relative">
        <select
          className={`
            w-full appearance-none bg-black/30 border border-white/10 rounded-xl py-3 pl-4 pr-10 text-white font-medium
            focus:outline-none focus:ring-2 focus:ring-brand-500/40 focus:border-brand-500/50
            transition-all duration-200 cursor-pointer
            ${className}
          `}
          {...props}
        >
          {options.map(opt => (
            <option key={opt.value} value={opt.value}>{opt.label}</option>
          ))}
        </select>
        <ChevronDown className="absolute right-4 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none w-5 h-5" />
      </div>
    </div>
  );
}