Accounts

import { useState } from 'react';
import { DataGridWithFilters, Avatar, Lookup, Sidebar } from '@cleen/cleen-components';
import { useAccountList } from '@/hooks/useAccountList';

export function AccountsList() {
  const [planFilter, setPlanFilter] = useState(null);
  const { rows, loading } = useAccountList({ planFilter });

  return (
    <Sidebar.Layout sidebar={<AccountFilters onPlanChange={setPlanFilter} />}>
      <DataGridWithFilters
        loading={loading}
        rows={rows}
        columns={[
          { key: 'logo',  label: '',        render: (r) => <Avatar src={r.logoUrl} name={r.name} /> },
          { key: 'name',  label: 'Account', sortable: true },
          { key: 'owner', label: 'Owner',   render: (r) => <Lookup readonly value={r.owner} /> },
          { key: 'plan',  label: 'Plan' },
          { key: 'mrr',   label: 'MRR',     align: 'right' },
        ]}
      />
    </Sidebar.Layout>
  );
}