function CamposScreen() {
  const { Button, Table, Icon } = window.SIGADesignSystem_97fcbf;
  const [page, setPage] = React.useState(1);
  const all = ['BUENA VISTA', 'CAMPO 1', 'CURUPICAI', 'FELICIANO', 'IBICUY ROCIO', 'ISLA DEL PILLO', 'MERCEDITAS', 'PUESTO DEL FONDO', 'ROCIO', 'RUINAS', 'RUINAS RECRIA', 'SALENTEIN', 'SAN JOSE', 'LA AURORA', 'EL RETIRO'];
  const perPage = 10;
  const rows = all.slice((page - 1) * perPage, page * perPage).map(nombre => ({ nombre }));
  return (
    <div style={{ padding: 24, display: 'flex', flexDirection: 'column', gap: 20 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
        <div style={{ display: 'flex', gap: 14, alignItems: 'center' }}>
          <span style={{ width: 44, height: 44, borderRadius: 10, background: 'var(--brand-primary-tint)', color: 'var(--brand-primary-strong)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Icon name="grid-2x2" size={22} /></span>
          <div>
            <div style={{ fontSize: 'var(--text-2xl)', fontWeight: 800 }}>Campos</div>
            <div style={{ fontSize: 14, color: 'var(--text-secondary)' }}>Gestioná los campos de tu estancia.</div>
          </div>
        </div>
        <Button variant="primary" icon={<Icon name="plus" size={16} />}>Agregar campo</Button>
      </div>
      <Table
        columns={[{ key: 'nombre', label: 'Nombre' }]}
        rows={rows}
        rowActions={() => <span style={{ display: 'flex', gap: 12, justifyContent: 'flex-end', color: 'var(--text-secondary)' }}><Icon name="pencil" size={16} /><Icon name="trash-2" size={16} /></span>}
        totalEntries={all.length} page={page} totalPages={Math.ceil(all.length / perPage)} onPageChange={setPage}
      />
    </div>
  );
}
window.CamposScreen = CamposScreen;