import { Select, Group } from '@mantine/core';
import { IconCheck } from '../../assets/icons';

interface MetodoSelectProps {
  metodo: string;
  setMetodo: (value: string) => void;
}

const metodoData = [
  { value: 'GET', label: 'GET' },
  { value: 'POST', label: 'POST' },
  { value: 'PUT', label: 'PUT' },
  { value: 'DELETE', label: 'DELETE' },
];

const colorMap: Record<string, string> = {
  GET: '#10b981',     // verde
  POST: '#3b82f6',    // azul
  PUT: '#f59e0b',     // naranja
  DELETE: '#ef4444',  // rojo
};

const backgroundMap: Record<string, string> = {
  GET: '#d1fae5',
  POST: '#e0f2fe',
  PUT: '#fef3c7',
  DELETE: '#fee2e2',
};

export function MetodoSelect({ metodo, setMetodo }: MetodoSelectProps) {
  return (
    <Select
      label="Método"
      value={metodo}
      onChange={(value) => setMetodo(value!)}
      data={metodoData}
      renderOption={({ option, checked }) => (
        <Group style={{ color: colorMap[option.value], fontWeight: 600 }}>
          {option.label}
          {checked && <IconCheck/>}
        </Group>
      )}
      styles={{
        input: {
          backgroundColor: backgroundMap[metodo],
          color: '#111',
          fontWeight: 600,
        },
      }}
    />
  );
}