"use client"

import type { ComponentType } from "react"
import { CircleUserRoundIcon, PencilIcon } from "lucide-react"
import { useTranslations } from "next-intl"

import { Link } from "@/i18n/navigation"
import { Button } from "@/components/ui/button"
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"

function ActionIconButton({
  icon: Icon,
  label,
  onClick,
}: {
  icon: ComponentType<{ className?: string }>
  label: string
  onClick: () => void
}) {
  return (
    <Tooltip>
      <TooltipTrigger asChild>
        <Button
          type="button"
          variant="ghost"
          size="icon-sm"
          aria-label={label}
          onClick={onClick}
        >
          <Icon />
        </Button>
      </TooltipTrigger>
      <TooltipContent>{label}</TooltipContent>
    </Tooltip>
  )
}

function ActionIconLink({
  href,
  icon: Icon,
  label,
}: {
  href: string
  icon: ComponentType<{ className?: string }>
  label: string
}) {
  return (
    <Tooltip>
      <TooltipTrigger asChild>
        <Button asChild variant="ghost" size="icon-sm">
          <Link aria-label={label} href={href}>
            <Icon />
          </Link>
        </Button>
      </TooltipTrigger>
      <TooltipContent>{label}</TooltipContent>
    </Tooltip>
  )
}

export function TenantTableActions({ tenantRouteId }: { tenantRouteId: string }) {
  const tc = useTranslations("Common")
  const t = useTranslations("Tenants")

  return (
    <TooltipProvider>
      <div className="flex flex-wrap items-center gap-1 min-w-fit">
        <ActionIconLink
          href={`/tenants/${tenantRouteId}/edit`}
          icon={PencilIcon}
          label={tc("actions.edit")}
        />
        <ActionIconButton
          icon={CircleUserRoundIcon}
          label={t("actions.loginAsStoreAdmin")}
          onClick={() => {}}
        />
      </div>
    </TooltipProvider>
  )
}