"use client";

import ProfileAvatar from "@/components/main/ProfileAvatar";
import { IAdvertisingProfile } from "@/types/types";
import Image from "next/image";
import React, { useState } from "react";
import AdProfileHeadRowTwo from "@/components/billboards/Profile/AdProfileHeadRowTwo";

interface AdProfileHeadProps {
  profile: IAdvertisingProfile;
  id: string | null;
}

function AdProfileHead({ profile, id }: AdProfileHeadProps) {
  const { profile_image, is_self, adTotalRatings,neighbourhood, adAverageRating, about_us } = profile;

 
  const [expanded, setExpanded] = useState(false);
  const maxLength = 100;

  const toggleExpanded = () => setExpanded(!expanded);

  if (!about_us) return (
    <div className="w-full">
      <div className="flex w-full items-center justify-between px-4 py-2">
        <div className="flex flex-col  text-xs md:text-sm ">
          <h1 className="text-xl font-bold ">{neighbourhood}</h1>
          <div className="flex gap-5 mt-2">
            <div className="font-semibold flex flex-col items-center">
              <span>{profile?.allImages?.length}</span>
              <span>تصاویر</span>
            </div>
            <div className="font-semibold flex flex-col items-center text-[#0C8002]">
              <span>{profile?.totalLikesCount}</span>
              <span>لایک ها</span>
            </div>
            <div className="font-semibold flex flex-col items-center text-[#3A59A9]">
              <span>{profile?.totalCommentsCount}</span>
              <span>نظرات</span>
            </div>
          </div>
        </div>
        {profile_image ? (
          <ProfileAvatar
            src={profile_image}
            alt={profile?.vitrine_name || "Name"}
            size="md"
            rounded="xl"
            className="md:h-[120px] md:w-[120px]"
          />
        ) : (
          <div className="border dark:border-border-primary-dark rounded-3xl p-2">
            <Image
              className="rounded-xl object-cover h-[65px] w-[65px] md:h-[120px] md:w-[120px] invert dark:invert-0"
              width={100}
              height={100}
              alt={profile?.vitrine_name || "Name"}
              src={`/images/icons/select-img.svg`}
            />
          </div>
        )}
      </div>
      <AdProfileHeadRowTwo
        is_self={is_self}
        adTotalRatings={adTotalRatings}
        adAverageRating={adAverageRating}
        id={id}
      />
    </div>
  );

 
  
  return (
    <div className="w-full">
      <div className="flex w-full items-center justify-between px-4 py-2">
        <div className="flex flex-col  text-xs md:text-sm ">
          <h1 className="text-xl font-bold ">{neighbourhood}</h1>
          <div className="flex gap-5 mt-2">
            <div className="font-semibold flex flex-col items-center">
              <span>{profile?.allImages?.length}</span>
              <span>تصاویر</span>
            </div>
            <div className="font-semibold flex flex-col items-center text-[#0C8002]">
              <span>{profile?.totalLikesCount}</span>
              <span>لایک ها</span>
            </div>
            <div className="font-semibold flex flex-col items-center text-[#3A59A9]">
              <span>{profile?.totalCommentsCount}</span>
              <span>نظرات</span>
            </div>
          </div>
        </div>
        {profile_image ? (
          <ProfileAvatar
            src={profile_image}
            alt={profile?.vitrine_name || "Name"}
            size="md"
            rounded="xl"
            className="md:h-[120px] md:w-[120px]"
          />
        ) : (
          <div className="border dark:border-border-primary-dark rounded-3xl p-2">
            <Image
              className="rounded-xl object-cover h-[65px] w-[65px] md:h-[120px] md:w-[120px] invert dark:invert-0"
              width={100}
              height={100}
              alt={profile?.vitrine_name || "Name"}
              src={`/images/icons/select-img.svg`}
            />
          </div>
        )}
      </div>
      <AdProfileHeadRowTwo
        is_self={is_self}
        adTotalRatings={adTotalRatings}
        adAverageRating={adAverageRating}
        id={id}
      />
      <div className="text-sm leading-relaxed mx-4">
       
      {about_us.length <= maxLength ? (
        about_us 
      ) : (
        <>
          {expanded ? about_us : about_us.slice(0, maxLength) + "..."}
          <button
            onClick={toggleExpanded}
            className="text-blue-500 hover:underline ml-2"
          >
            {expanded ? "کمتر" : "بیشتر"}
          </button>
        </>
      )}
    </div>
    </div>
  );
}

export default AdProfileHead;
