import { Link } from "react-router-dom";
import { useTranslation } from "react-i18next";
import { FiUsers, FiCheck } from "react-icons/fi";
import type { Hub } from "@/api/generated/private/models/hub";
import Avatar from "@/components/ui/Avatar";

interface Props {
  hub: Hub;
  isMember: boolean;
}

export default function HubCard({ hub, isMember }: Props) {
  const { t } = useTranslation("social");

  return (
    <Link
      to={`/social/h/${hub.name}`}
      className="flex items-start gap-3 rounded-xl border border-brand-lines/15 bg-brand-bgLight/30 p-3 transition-colors hover:bg-brand-lines/10 hover:border-brand-lines/30"
    >
      <Avatar name={hub.name} src={hub.icon ?? undefined} size={44} />
      <div className="min-w-0 flex-1">
        <div className="flex items-center gap-2">
          <span className="truncate text-sm font-semibold text-brand-text">{hub.name}</span>
          {isMember && (
            <span className="shrink-0 flex items-center gap-0.5 rounded-full bg-brand-accent/15 px-1.5 py-0.5 text-[10px] font-medium text-brand-accent">
              <FiCheck size={9} /> {t("hub.member")}
            </span>
          )}
        </div>
        {hub.description && (
          <p className="mt-0.5 line-clamp-2 text-xs text-brand-text/55 leading-relaxed">
            {hub.description}
          </p>
        )}
        <div className="mt-1.5 flex items-center gap-1 text-[11px] text-brand-text/40">
          <FiUsers size={11} />
          <span>{t("hub.members", { count: hub.members?.length ?? 0 })}</span>
        </div>
      </div>
    </Link>
  );
}
