import { t as i18nT } from "i18next";
import { useLocaleFormatters } from "~/locale/format";
import TableSimple from "./TableSimple";

const items = [
  {
    firstName: "John",
    lastName: "Doe",
    email: "john.doe@company.com",
    salary: 100,
    birthday: new Date(1990, 1, 1),
  },
  {
    firstName: "Luna",
    lastName: "Davis",
    email: "luna.davis@company.com",
    salary: 100.5,
    birthday: new Date(1990, 12, 31),
  },
];
export default function PreviewTableSimple() {
  const formatters = useLocaleFormatters();
  return (
    <div id="buttons">
      <div className="not-prose border-border bg-background border border-dashed p-6">
        <div className="w-full space-y-2">
          <TableSimple
            items={items}
            headers={[
              {
                title: i18nT("components.tables.preview.fullName"),
                name: "name",
                value: (item) => `${item.firstName} ${item.lastName}`,
              },
              {
                title: i18nT("components.tables.preview.email"),
                name: "email",
                value: (item) => item.email,
              },
              {
                title: i18nT("components.tables.preview.salary"),
                name: "salary",
                className: "text-blue-500",
                value: (item) => item.salary,
                formattedValue: (item) => formatters.number(item.salary, { minimumFractionDigits: 2, maximumFractionDigits: 2 }),
              },
              {
                title: i18nT("components.tables.preview.birthday"),
                name: "birthday",
                className: "text-muted-foreground",
                value: (item) => item.birthday,
                formattedValue: (item) => formatters.date(item.birthday),
              },
            ]}
            actions={[
              {
                title: i18nT("components.tables.preview.view"),
                onClick: (_, item) => alert(i18nT("components.tables.preview.clicked", { name: item.firstName })),
              },
            ]}
          ></TableSimple>
        </div>
      </div>
    </div>
  );
}