import * as React from 'react';

export interface CrudToolbarAction {
  label: string;
  tone?: 'primary' | 'neutral';
  href?: string;
  onClick?: () => void;
}

export interface CrudToolbarProps {
  searchPlaceholder?: string;
  filters?: string[];
  actions?: CrudToolbarAction[];
}

const actionToneMap: Record<NonNullable<CrudToolbarAction['tone']>, string> = {
  primary: 'border-slate-900 bg-slate-900 text-white',
  neutral: 'border-slate-200 bg-white text-slate-700',
};

export function CrudToolbar({
  searchPlaceholder = 'Buscar por nome, e-mail, telefone, documento ou status',
  filters = [],
  actions = [
    { label: 'Novo', tone: 'primary' },
    { label: 'Filtros avancados', tone: 'neutral' },
    { label: 'Exportar CSV', tone: 'neutral' },
    { label: 'Exportar PDF', tone: 'neutral' },
  ],
}: CrudToolbarProps) {
  return (
    <div className="space-y-4">
      <div className="flex flex-col gap-3 xl:flex-row xl:items-center xl:justify-between">
        <label className="flex min-w-0 flex-1 items-center gap-3 rounded-[1.3rem] border border-slate-200 bg-white px-4 py-3 shadow-sm">
          <span className="text-sm text-slate-400" aria-hidden>
            Buscar
          </span>
          <input
            readOnly
            value=""
            placeholder={searchPlaceholder}
            className="w-full bg-transparent text-sm text-slate-700 outline-none placeholder:text-slate-400"
          />
        </label>
        <div className="flex flex-wrap gap-2">
          {actions.map((action) => (
            action.onClick ? (
              <button
                key={action.label}
                type="button"
                onClick={action.onClick}
                className={`rounded-full border px-4 py-2 text-xs font-bold uppercase tracking-[0.18em] transition ${actionToneMap[action.tone ?? 'neutral']}`}
              >
                {action.label}
              </button>
            ) : (
              <a
                key={action.label}
                href={action.href ?? '#'}
                className={`rounded-full border px-4 py-2 text-xs font-bold uppercase tracking-[0.18em] transition ${actionToneMap[action.tone ?? 'neutral']}`}
              >
                {action.label}
              </a>
            )
          ))}
        </div>
      </div>
      {filters.length ? (
        <div className="flex flex-wrap gap-2">
          {filters.map((filter) => (
            <span
              key={filter}
              className="rounded-full border border-slate-200 bg-slate-50 px-3 py-1 text-[11px] font-bold uppercase tracking-[0.18em] text-slate-600"
            >
              {filter}
            </span>
          ))}
        </div>
      ) : null}
    </div>
  );
}