'use client'
import React, { useState } from "react";

interface ProfileHeadRowThreeProps {
  user_level: string | undefined;
  bio: string | undefined;
}

function ModelHeadRowThree({ user_level, bio }: ProfileHeadRowThreeProps) {
  const [showFull, setShowFull] = useState(false);

  if (!bio) bio = ""; // اطمینان از اینکه bio همیشه رشته است
  const shouldTruncate = bio.length > 100;
  const displayedBio = showFull || !shouldTruncate ? bio : bio.slice(0, 100);

  return (
    <div className="px-4 py-2 w-full text-xs md:text-sm font-semibold">
      <div className="flex justify-between items-start">
        <h4 className=" w-8/12">
          {displayedBio}
          {shouldTruncate && !showFull ? "..." : "..."}
          {shouldTruncate && (
            <button
              className="text-blue-500 text-xs mt-1"
              onClick={() => setShowFull(!showFull)}
            >
              {showFull ? "کمتر" : "بیشتر"}
            </button>
          )}
        </h4>
        <div className="flex flex-col items-end">
          <h6 className="text-[#387E65]">
            سطح: {user_level ? user_level : "تازه وارد"}
          </h6>
        </div>
      </div>
    </div>
  );
}

export default ModelHeadRowThree;
