TableToolbar

'use client';

import { useState } from 'react';
import { TableToolbar } from '@hey-mike/tungsten';
import { VariantGrid } from '../_components/VariantGrid';
import { HeroSpecimen } from '../_components/HeroSpecimen';

// Gallery thumbnail: the default toolbar (search + density), no selection
// bulk-bar — that pink "N selected" state read as broken at thumbnail size.
function HeroToolbar() {
  return (
    <TableToolbar label="User controls">
      <TableToolbar.Search value="" onValueChange={() => {}} placeholder="Search…" />
      <TableToolbar.Spacer />
      <TableToolbar.Density value="comfortable" onValueChange={() => {}} />
    </TableToolbar>
  );
}

function UserControls() {
  const [query, setQuery] = useState('');
  const [density, setDensity] = useState<'comfortable' | 'compact'>('comfortable');

  return (
    <div className="w-[40rem]">
      <TableToolbar label="User controls">
        <TableToolbar.Search
          value={query}
          onValueChange={setQuery}
          placeholder="Search users…"
        />
        <TableToolbar.Filters>
          <span className="border-stroke text-ink-2 inline-flex rounded-sm border px-2 py-0.5 font-mono text-xs uppercase">
            Role: Admin
          </span>
          <span className="border-stroke text-ink-2 inline-flex rounded-sm border px-2 py-0.5 font-mono text-xs uppercase">
            Status: Active
          </span>
        </TableToolbar.Filters>
        <TableToolbar.Spacer />
        <TableToolbar.Density value={density} onValueChange={setDensity} />
      </TableToolbar>
      <TableToolbar.BulkBar count={2} onClear={() => {}}>
        <button
          type="button"
          className="text-ink-2 hover:text-ink-1 rounded-sm text-xs font-medium"
        >
          Delete
        </button>
      </TableToolbar.BulkBar>
    </div>
  );
}

export default function TableToolbarSnapshot() {
  return (
    <VariantGrid
      title="TableToolbar"
      hero={
        <HeroSpecimen>
          <HeroToolbar />
        </HeroSpecimen>
      }
      variants={[
        {
          label: 'user-controls',
          node: <UserControls />,
        },
      ]}
    />
  );
}