"use client";

import { useTranslation } from "react-i18next";
import { TProjectTeam } from "@/modules/ee/teams/project-teams/types/team";
import { TeamPermissionMapping } from "@/modules/ee/teams/utils/teams";
import { IdBadge } from "@/modules/ui/components/id-badge";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/modules/ui/components/table";

interface AccessTableProps {
  teams: TProjectTeam[];
}

export const AccessTable = ({ teams }: AccessTableProps) => {
  const { t } = useTranslation();

  return (
    <div className="overflow-hidden rounded-lg">
      <Table>
        <TableHeader>
          <TableRow className="bg-slate-100">
            <TableHead className="font-medium text-slate-500">
              {t("environments.workspace.teams.team_name")}
            </TableHead>
            <TableHead className="font-medium text-slate-500">{t("common.size")}</TableHead>
            <TableHead className="font-medium text-slate-500">{t("common.team_id")}</TableHead>
            <TableHead className="font-medium text-slate-500">
              {t("environments.workspace.teams.permission")}
            </TableHead>
          </TableRow>
        </TableHeader>
        <TableBody className="[&_tr:last-child]:border-b">
          {teams.length === 0 && (
            <TableRow className="hover:bg-transparent">
              <TableCell colSpan={4} className="text-center">
                {t("environments.workspace.teams.no_teams_found")}
              </TableCell>
            </TableRow>
          )}
          {teams.map((team) => (
            <TableRow key={team.id} className="border-slate-200 hover:bg-transparent">
              <TableCell className="font-medium">{team.name}</TableCell>
              <TableCell>{t("common.count_members", { count: team.memberCount })}</TableCell>
              <TableCell>
                <IdBadge id={team.id} />
              </TableCell>
              <TableCell>
                <p className="capitalize">{TeamPermissionMapping[team.permission]}</p>
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </div>
  );
};
