"use client";

import ExpandableBio from "@/components/profile/ExpandableBio";
import { useTranslation } from "react-i18next";
import { cn } from "@/lib/utils";

interface ProfileHeadRowThreeProps {
  user_level: string | undefined;
  bio: string | undefined;
  isFa?: boolean;
}

function ModelHeadRowThree({
  user_level,
  bio,
  isFa = true,
}: ProfileHeadRowThreeProps) {
  const { t } = useTranslation("common");
  const levelLabel = t("models.level", {
    level: user_level ? user_level : t("models.newcomer"),
  });
  const hasBio = Boolean(bio?.trim());

  return (
    <div className="w-full py-2 text-xs font-semibold md:text-sm">
      <div
        className={cn(
          "flex w-full gap-3",
          hasBio ? "items-baseline justify-between" : "items-center justify-end"
        )}
      >
        {hasBio ? (
          <div
            className={cn(
              "min-w-0 flex-1 leading-6",
              isFa ? "text-right" : "text-left"
            )}
          >
            <ExpandableBio
              bio={bio}
              className={cn("leading-6", isFa ? "text-right" : "text-left")}
            />
          </div>
        ) : null}
        <div
          className={cn(
            "shrink-0 leading-6 text-[#387E65]",
            isFa ? "text-right" : "text-left"
          )}
        >
          {levelLabel}
        </div>
      </div>
    </div>
  );
}

export default ModelHeadRowThree;
