"use client"

import Link from "next/link"
import { useTranslations } from "next-intl"
import type { ReactNode } from "react"

import { Button } from "@/shared/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/shared/components/ui/card"

export interface QuickLinkItem {
  href: string
  /** settings.quickLinks 命名空间下的 i18n 键 */
  labelKey: string
  icon?: ReactNode
}

/**
 * 快捷链接卡片
 *
 * 在设置页 General 标签页底部展示角色专属的常用入口。
 * 文本通过 settings.quickLinks 命名空间国际化。
 */
export function QuickLinksCard({ links }: { links: QuickLinkItem[] }): ReactNode {
  const t = useTranslations("settings.quickLinks")
  return (
    <Card>
      <CardHeader>
        <CardTitle>{t("title")}</CardTitle>
        <CardDescription>{t("description")}</CardDescription>
      </CardHeader>
      <CardContent className="flex flex-wrap gap-2">
        <Button asChild variant="outline">
          <Link href="/profile">{t("profile")}</Link>
        </Button>
        {links.map((link) => (
          <Button key={link.href} asChild variant="outline" className="gap-2">
            <Link href={link.href}>
              {link.icon}
              {t(link.labelKey)}
            </Link>
          </Button>
        ))}
      </CardContent>
    </Card>
  )
}