import { ColumnDef } from "@tanstack/react-table";
import { Button } from "@/shared/common/ui/button";
import { Trash2, Edit } from "lucide-react";
import { ContactUsItem } from "../types/contactUs";
import { t } from "i18next";
import i18n from "@/i18n";
export const ContactUsColumnDefn = ({
  //  onDelete,
  navigate,
  onDelete,
}: {
  navigate: (id: string) => void;
  onDelete: (id: string) => Promise<void>;
}): ColumnDef<ContactUsItem>[] => [
    {
      accessorKey: "title",
      header: () => t("toogle.title"),
      cell: ({ row }) => {
        const rowData = row.original;
        const lang = i18n.language;
        if (lang === "am") {
          return <span>{rowData.name?.am || "-"}</span>;
        }
        if (lang === "en") {
          return <span>{rowData.name?.en || "-"}</span>;
        } else {
          return <span>{"-"}</span>;
        }
      },
      enableHiding: true,
    },
    {
      accessorKey: "link",
      header: () => t("toogle.link"),
      cell: ({ row }) => {
        const rowData = row.original;
        return <span>{rowData.value || "-"}</span>;
      },
      enableHiding: true,
    },
    {
      accessorKey: "status",
      header: () => t("toogle.status"),
      cell: ({ row }) => {
        const rowData = row.original;
        return (
          <span
            className={`px-2 py-1 rounded-full text-xs font-medium ${rowData.isActive
                ? "bg-primary-100 text-primary-800"
                : "bg-red-100 text-red-800"
              }`}
          >
            {rowData.isActive ? "Active" : "Inactive"}
          </span>
        );
      },
      enableHiding: true,
    },
    {
      accessorKey: "createdAt",
      header: () => t("toogle.createdAt"),
      cell: ({ row }) => {
        const rowData = row.original;
        const lang = i18n.language;
        const amDate = rowData?.amharicCreatedAt;
        const enDate = new Date(rowData.createdAt).toLocaleString("en-US", {
          month: "short", // "Oct"
          day: "numeric", // "12"
          year: "numeric", // "2014"
          hour: "numeric", // "8"
          minute: "2-digit", // "12"
          hour12: true, // "PM" format
        });
        const date = lang === "am" ? amDate : enDate;
        return <span className="text-sm text-gray-500">{date}</span>;
      },
      enableHiding: true,
    },
    {
      accessorKey: "Actions",
      header: () => t("toogle.Actions"),
      cell: ({ row }) => (
        <div className="flex space-x-2">
          <Button
            variant="ghost"
            size="icon"
            onClick={() =>
              navigate(
                `/user-management/web-management/ContactUs/EditContactUs/${row.original.id}`
              )
            }
          >
            <Edit className="h-4 w-4" />
          </Button>
          <Button
            variant="ghost"
            size="icon"
            onClick={() => onDelete(row.original.id)}
          >
            <Trash2 className="h-4 w-4 text-destructive" />
          </Button>
        </div>
      ),
    },
  ];
