useLocalStorage

import { useLocalStorage } from '@partodata/ui'
import { EntityLayoutToggle } from '@partodata/ui/social'

function SettingsPanel() {
  const [viewMode, setViewMode] = useLocalStorage<'card' | 'row'>('view-mode', 'card')

  return <EntityLayoutToggle layouts={['card', 'row']} value={viewMode} onValueChange={setViewMode} />
}

function InfluencersPage() {
  const [view, setView] = useLocalStorage<'tile' | 'row'>('influencers-view', 'row')
  const rows = data?.items ?? []

  return (
    <ListPage
      title="اینفلوئنسرها"
      toolbarEnd={<EntityLayoutToggle layouts={['tile', 'row']} value={view} onValueChange={setView} />}
      skeleton={view === 'tile' ? 'cards' : 'table'}
      state={pageState({
        data: data?.items,
        isLoading,
        error,
        onRetry: load,
        emptyCopy: { title: 'هنوز اینفلوئنسری ثبت نشده است' },
      })}
    >
      {view === 'tile' ? (
        <div className="grid grid-cols-[repeat(auto-fill,minmax(min(var(--layout-tile-min-width),100%),1fr))] gap-layout-block-gap">
          {rows.map((row) => (
            <Account key={row.id} account={row} layout="card" />
          ))}
        </div>
      ) : (
        <DataTable columns={columns} data={rows} />
      )}
    </ListPage>
  )
}