Drawer

import { Drawer } from '@base-ui/react/drawer';

const FILTERS = ['Paid', 'Pending', 'Refunded', 'Shipped this week'];
// A strong ease-out: the sheet leaves fast and settles softly.
const SLIDE = 'duration-400 ease-[cubic-bezier(0.23,1,0.32,1)]';

export function OrderFiltersSheet() {
  return (
    <Drawer.Root>
      <Drawer.Trigger className='rounded-lg border px-4 py-2 text-sm font-medium hover:bg-muted'>
        Filters
      </Drawer.Trigger>
      <Drawer.Portal>
        <Drawer.Backdrop
          className={`fixed inset-0 bg-black/40 opacity-[calc(1-var(--drawer-swipe-progress))] transition-opacity ${SLIDE} data-ending-style:opacity-0 data-starting-style:opacity-0 data-swiping:duration-0`}
        />
        <Drawer.Viewport className='fixed inset-0 flex items-end justify-center'>
          {/* Base UI follows the drag: past its distance or speed threshold
              the sheet closes, otherwise it springs back into place. */}
          <Drawer.Popup
            className={`w-full max-w-lg translate-y-(--drawer-swipe-movement-y) rounded-t-2xl border-t bg-background px-6 pt-3 pb-8 outline-none transition-transform ${SLIDE} data-ending-style:translate-y-full data-starting-style:translate-y-full data-swiping:duration-0 motion-reduce:transition-none`}
          >
            <div className='mx-auto mb-4 h-1.5 w-10 rounded-full bg-muted' />
            <Drawer.Content>
              <Drawer.Title className='text-base font-semibold'>
                Filter orders
              </Drawer.Title>
              <div className='mt-4 flex flex-col gap-3'>
                {FILTERS.map((filter) => (
                  <label
                    key={filter}
                    className='flex items-center gap-3 text-sm'
                  >
                    <input type='checkbox' className='size-4 accent-blue-600' />
                    {filter}
                  </label>
                ))}
              </div>
              <Drawer.Close className='mt-6 h-11 w-full rounded-lg bg-primary text-sm font-medium text-primary-foreground'>
                Show results
              </Drawer.Close>
            </Drawer.Content>
          </Drawer.Popup>
        </Drawer.Viewport>
      </Drawer.Portal>
    </Drawer.Root>
  );
}