import SearchInput from '@/components/ui/search-input';
import useDebounced from '@/hooks/use-debounced';
import { m } from '@/paraglide/messages';
import { PackageIcon } from '@phosphor-icons/react';
import { createFileRoute } from '@tanstack/react-router';
import { Card, CardContent, CardHeader, CardTitle } from '@ui/card';
import { useState } from 'react';

export const Route = createFileRoute('/(app)/(auth)/kanri/boxes')({
  component: RouteComponent,
  staticData: { breadcrumb: () => m.nav_boxes() },
});

function RouteComponent() {
  const [page, setPage] = useState(1);
  const [pageLimit, setPageLimit] = useState(10);
  const [searchKeyword, setSearchKeyword] = useState('');
  const debouncedSearch = useDebounced(searchKeyword, 500);

  const onSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setSearchKeyword(e.target.value);
    setPage(1);
  };

  return (
    <div className="@container/main flex flex-1 flex-col gap-2 p-4">
      <div className="*:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card dark:*:data-[slot=card]:bg-card *:data-[slot=card]:bg-linear-to-br *:data-[slot=card]:shadow-xs">
        <Card>
          <CardHeader>
            <CardTitle className="text-xl flex items-center gap-2">
              <PackageIcon size={24} />
              {m.boxes_pages_ui_title()}
            </CardTitle>
          </CardHeader>
          <CardContent className="flex flex-col gap-4">
            <div className="flex items-center justify-between gap-2">
              <SearchInput
                keywords={searchKeyword}
                setKeyword={setSearchKeyword}
                onChange={onSearchChange}
              />
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}
