import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/shared/common/ui/table";
import { Badge } from "@/shared/common/ui/badge";
import { formatDistanceToNow } from "date-fns";
import { OrganizationDto } from "@/shared/dto/organization/organizationDto";
import { t } from "i18next";
interface OrgTableProps {
  organizations: OrganizationDto[];
}

export const OrgTable = ({ organizations }: OrgTableProps) => {
  if (!organizations || organizations.length === 0) {
    return (
      <div className="text-sm text-muted-foreground text-center py-4 border dark:border-gray-700 rounded-xl p-6 dark:bg-gray-800">
        No organizations found
      </div>
    );
  }
 
  return (
    <div className="rounded-xl overflow-hidden shadow-sm border bg-white dark:bg-gray-800 dark:border-gray-700">
      <Table>
        <TableHeader className="bg-white dark:bg-gray-800 text-muted-foreground">
          <TableRow>
            <TableHead className="px-6 py-3">{t("organization.organizationName")}</TableHead>
            {/* <TableHead className="px-6 py-3">{t("organization.key")}</TableHead> */}
            <TableHead className="px-6 py-3">{t("organization.createdOn")}</TableHead>
            <TableHead className="px-6 py-3">{t("dashboard.Status")}</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {organizations.map((org, index) => (
            <TableRow
              key={org.id}
              className={index % 2 ? "bg-primary-50/20 dark:bg-gray-700/40" : "bg-white dark:bg-gray-800"}
            >
              <TableCell className="px-6 py-3 font-medium">
                {org.name?.en || "N/A"}
              </TableCell>
              {/* <TableCell className="px-6 py-3">{org.key || "N/A"}</TableCell> */}
              <TableCell className="px-6 py-3">
                {org.createdAt
                  ? formatDistanceToNow(new Date(org.createdAt), {
                      addSuffix: true,
                    })
                  : "N/A"}
              </TableCell>
              <TableCell className="px-6 py-3">
                <Badge
                  variant={org.status === "Active" ? "default" : "outline"}
                  className={
                    org.status === "Active"
                      ? "bg-primary-100 text-primary-800 hover:bg-primary-100 dark:bg-primary-900/50 dark:text-primary-300"
                      : "bg-gray-100 text-gray-800 hover:bg-gray-100 dark:bg-gray-700 dark:text-gray-300"
                  }
                >
                  {org.status === "Active" ? t("statusBar.activate") : t("statusBar.deactivate")}
                </Badge>
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </div>
  );
};
