export const labelClass = 'block text-xs font-semibold uppercase tracking-wide text-slate-500';

export const inputClass =
    'mt-1.5 block w-full rounded-xl border-slate-200 bg-white px-3 py-2.5 text-sm text-slate-800 shadow-sm transition placeholder:text-slate-400 focus:border-indigo-400 focus:outline-none focus:ring-2 focus:ring-indigo-500/20';

export const selectClass = inputClass;

export const cardClass = 'overflow-hidden rounded-2xl border border-slate-200/80 bg-white shadow-sm';

export const filterBarClass =
    'mb-6 flex flex-wrap gap-4 rounded-2xl border border-slate-200/80 bg-white p-5 shadow-sm';

export const thFilterClass = 'px-6 py-3 align-bottom';

export const filterLabelClass =
    'mb-1.5 block text-xs font-semibold uppercase tracking-wide text-slate-600';

export const filterInputClass =
    'block w-full min-w-[7rem] rounded-lg border-slate-200 bg-white px-2.5 py-1.5 text-sm text-slate-800 shadow-sm transition placeholder:text-slate-400 focus:border-indigo-400 focus:outline-none focus:ring-2 focus:ring-indigo-500/20';

export const filterSelectClass = filterInputClass;

export const formPanelClass =
    'mb-6 rounded-2xl border border-indigo-200/60 bg-white p-6 shadow-sm ring-1 ring-indigo-50';

export const thClass =
    'px-6 py-4 text-left text-xs font-semibold uppercase tracking-wide text-slate-600';

export const tdClass = 'px-6 py-4 text-sm text-slate-600';

export const rowClass = '';

export const linkClass = 'font-medium text-indigo-600 transition hover:text-indigo-800';

export const machineStatusColors = {
    available: 'bg-emerald-100 text-emerald-800 ring-emerald-600/20',
    reserved: 'bg-amber-100 text-amber-800 ring-amber-600/20',
    running: 'bg-sky-100 text-sky-800 ring-sky-600/20',
    maintenance: 'bg-orange-100 text-orange-800 ring-orange-600/20',
    offline: 'bg-slate-100 text-slate-600 ring-slate-500/20',
    error: 'bg-red-100 text-red-800 ring-red-600/20',
};

export const bookingStatusColors = {
    pending: 'bg-slate-100 text-slate-600 ring-slate-500/20',
    confirmed: 'bg-sky-100 text-sky-800 ring-sky-600/20',
    expired: 'bg-orange-100 text-orange-800 ring-orange-600/20',
    active: 'bg-emerald-100 text-emerald-800 ring-emerald-600/20',
    completed: 'bg-indigo-100 text-indigo-800 ring-indigo-600/20',
    cancelled: 'bg-amber-100 text-amber-800 ring-amber-600/20',
    no_show: 'bg-red-100 text-red-800 ring-red-600/20',
};

export const washStatusColors = {
    pending_start: 'bg-slate-100 text-slate-600 ring-slate-500/20',
    running: 'bg-sky-100 text-sky-800 ring-sky-600/20',
    completed: 'bg-emerald-100 text-emerald-800 ring-emerald-600/20',
    failed: 'bg-red-100 text-red-800 ring-red-600/20',
    cancelled: 'bg-amber-100 text-amber-800 ring-amber-600/20',
};

export const activeStatusColors = {
    active: 'bg-emerald-100 text-emerald-800 ring-emerald-600/20',
    inactive: 'bg-slate-100 text-slate-600 ring-slate-500/20',
};

export const getStatusColor = (status, map) => map[status] ?? 'bg-slate-100 text-slate-700 ring-slate-500/20';