import { DataTableProvider } from "@/lib/hooks";
import { Trans } from "react-i18next";
import { QuotesDataTable } from "./components";

import { Button } from "@/ui";
import { t } from "i18next";
import { useNavigate } from "react-router-dom";

export const QuotesList = () => {
  const navigate = useNavigate();

  return (
    <DataTableProvider>
      <div className='flex items-center justify-between space-y-2'>
        <div>
          <h2 className='text-2xl font-bold tracking-tight'>
            <Trans i18nKey='quotes.list.title' />
          </h2>
          <p className='text-muted-foreground'>descripción</p>
        </div>
        <div className='flex items-center space-x-2'>
          <Button onClick={() => navigate("/quotes/add")}>{t("quotes.create.title")}</Button>
        </div>
      </div>

      <QuotesDataTable />
    </DataTableProvider>
  );
};