"use client";

import { useEffect, useState } from "react";
import Link from "next/link";
import { RankIcon1st } from "./RankIcon1st";
import { RankIcon2nd } from "./RankIcon2nd";
import { RankIcon3rd } from "./RankIcon3rd";
import { UserAvatar } from "./UserAvatar";
import { ImagePlaceholderIcon } from "./ImagePlaceholderIcon";
import { PostList } from "./PostList";
import { GradeIcon } from "./GradeIcon";

type BoardMeta = {
  id: string;
  name: string;
  slug: string;
  mainTypeKey?: string;
};

type UserData = {
  userId: string;
  nickname: string | null;
  points: number;
  profileImage: string | null;
  grade: number;
};

type PostData = {
  id: string;
  title: string;
  createdAt: Date;
  content?: string | null;
  attachments?: { url: string }[];
  stat?: { recommendCount: number | null; commentsCount: number | null };
};

type BoardPanelData = {
  board: BoardMeta;
  categoryName: string;
  siblingBoards: BoardMeta[];
  specialRankUsers?: UserData[];
  previewPosts?: PostData[];
  textPosts?: PostData[];
};

export function BoardPanelClient({
  initialBoardId,
  boardsData
}: {
  initialBoardId: string;
  boardsData: BoardPanelData[];
}) {
  const [selectedBoardId, setSelectedBoardId] = useState(initialBoardId);

  // 데이터가 비어있을 때 안전 처리
  if (!boardsData || boardsData.length === 0) {
    return (
      <div className="h-full min-h-0 flex items-center justify-center rounded-xl bg-white text-sm text-neutral-500">
        선택된 게시판이 없습니다.
      </div>
    );
  }

  // 선택된 보드가 목록에 없으면 첫 번째 보드로 동기화
  useEffect(() => {
    const exists = boardsData.some((bd) => bd.board.id === selectedBoardId);
    if (!exists) {
      setSelectedBoardId(boardsData[0].board.id);
    }
  }, [boardsData, selectedBoardId]);

  // 선택된 게시판 데이터 찾기
  const selectedBoardData = boardsData.find(bd => bd.board.id === selectedBoardId) || boardsData[0];
  const { board, categoryName, siblingBoards } = selectedBoardData;

  const isNewWithin1Hour = (createdAt: Date | string | number | null | undefined): boolean => {
    if (!createdAt) return false;
    const t = new Date(createdAt).getTime();
    if (Number.isNaN(t)) return false;
    return (Date.now() - t) <= 60 * 60 * 1000;
  };

  function formatDateYmd(d: Date) {
    const date = new Date(d);
    const yyyy = date.getFullYear();
    const mm = String(date.getMonth() + 1).padStart(2, "0");
    const dd = String(date.getDate()).padStart(2, "0");
    return `${yyyy}.${mm}.${dd}`;
  }

  function stripHtml(html: string | null | undefined): string {
    if (!html) return "";
    // HTML 태그 제거
    return html.replace(/<[^>]*>/g, "").trim();
  }

  function extractImageFromContent(content: string | null | undefined): string | null {
    if (!content) return null;
    // img 태그에서 src 속성 추출
    const imgMatch = content.match(/<img[^>]+src=["']([^"']+)["'][^>]*>/i);
    if (imgMatch && imgMatch[1]) {
      return imgMatch[1];
    }
    // figure 안의 img 태그도 확인
    const figureMatch = content.match(/<figure[^>]*>[\s\S]*?<img[^>]+src=["']([^"']+)["'][^>]*>/i);
    if (figureMatch && figureMatch[1]) {
      return figureMatch[1];
    }
    return null;
  }

  const isTextMain = board.mainTypeKey === "main_text";
  const isSpecialRank = board.mainTypeKey === "main_special_rank";
  const isPreview = board.mainTypeKey === "main_preview";

  // 특수 랭킹 타입 렌더링
  if (isSpecialRank && selectedBoardData.specialRankUsers) {
    return (
      <div className="h-full min-h-0 flex flex-col">
        <div className="content-stretch flex flex-col md:flex-row gap-[8px] md:gap-[16px] 2xl:gap-[30px] items-start w-full mb-2">
          <div className="flex items-center gap-[8px] shrink-0">
            <div className="text-[20px] leading-[20px] md:text-[24px] md:leading-[24px] 2xl:text-[30px] 2xl:leading-[30px] text-[#5c5c5c]">{categoryName || board.name}</div>
            <Link href={`/boards/${board.slug}`} aria-label={`${board.name} 게시판으로 이동`} className="shrink-0 group">
              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 19 19" fill="none" className="block group-hover:hidden">
                <path d="M10.25 12.5L13.25 9.5M13.25 9.5L10.25 6.5M13.25 9.5L5.75 9.5M18.5 9.5C18.5 14.4706 14.4706 18.5 9.5 18.5C4.52944 18.5 0.5 14.4706 0.5 9.5C0.5 4.52944 4.52944 0.5 9.5 0.5C14.4706 0.5 18.5 4.52944 18.5 9.5Z" stroke="#8C8C8C" strokeLinecap="round" strokeLinejoin="round" />
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none" className="hidden group-hover:block">
                <path fillRule="evenodd" clipRule="evenodd" d="M9.75 0C4.36522 0 0 4.36522 0 9.75C0 15.1348 4.36522 19.5 9.75 19.5C15.1348 19.5 19.5 15.1348 19.5 9.75C19.5 4.36522 15.1348 0 9.75 0ZM14.0303 10.2803C14.171 10.1397 14.25 9.94891 14.25 9.75C14.25 9.55109 14.171 9.36032 14.0303 9.21967L11.0303 6.21967C10.7374 5.92678 10.2626 5.92678 9.96967 6.21967C9.67678 6.51256 9.67678 6.98744 9.96967 7.28033L11.6893 9L6 9C5.58579 9 5.25 9.33578 5.25 9.75C5.25 10.1642 5.58579 10.5 6 10.5L11.6893 10.5L9.96967 12.2197C9.67678 12.5126 9.67678 12.9874 9.96967 13.2803C10.2626 13.5732 10.7374 13.5732 11.0303 13.2803L14.0303 10.2803Z" fill="#5C5C5C" />
              </svg>
            </Link>
          </div>
          <div className="flex items-center gap-[6px] md:gap-[6px] 2xl:gap-[8px] flex-wrap w-full md:w-auto min-w-0 md:flex-1 md:overflow-x-auto md:flex-nowrap no-scrollbar">
            {siblingBoards.map((sb) => (
              <button
                key={sb.id}
                onClick={() => setSelectedBoardId(sb.id)}
                className={`px-3 py-1.5 text-[12px] rounded-[12px] md:px-3.5 md:py-[6px] md:text-[13px] md:rounded-[12px] 2xl:px-[16px] 2xl:py-[8px] 2xl:text-[14px] 2xl:rounded-[14px] shrink-0 cursor-pointer ${sb.id === selectedBoardId ? "bg-[#5c5c5c] text-white border border-[#5c5c5c]" : "bg-white text-[#5c5c5c] border border-[#d5d5d5] hover:bg-[#5c5c5c] hover:text-white hover:border-[#5c5c5c] transition-colors"
                  }`}
              >
                {sb.name}
              </button>
            ))}
          </div>
        </div>
        <div className="overflow-hidden h-full min-h-0 flex flex-col">
          <div className="flex-1 min-h-0 overflow-hidden p-0">
            <div className="px-[0px] pt-[6px] pb-[6px]">
              <div className="flex flex-col gap-[6px]">
                {selectedBoardData.specialRankUsers.map((user, idx) => {
                  const rank = idx + 1;
                  return (
                    <Link href="/boards/ranking" key={user.userId} className=" mx-[4px] flex h-[76px] items-center rounded-[10px] overflow-hidden bg-white hover:bg-neutral-50 transition-shadow hover:[box-shadow:0_0_2px_0_var(--color-alpha-shadow2,_rgba(0,0,0,0.08)),_0_var(--shadow-y-3,_8px)_var(--shadow-blur-3,_16px)_0_var(--color-alpha-shadow3,_rgba(0,0,0,0.12))] pl-[12px]">
                      <div className="relative shrink-0">
                        <div className="h-[56px] w-[56px] bg-[#d5d5d5] overflow-hidden rounded-full">
                          <UserAvatar
                            src={user.profileImage}
                            alt={user.nickname || "프로필"}
                            width={56}
                            height={56}
                            className="w-full h-full object-cover rounded-full"
                          />
                        </div>
                        <div className="absolute -right-1 -bottom-1 w-[22px] h-[22px] flex items-center justify-center z-10">
                          <GradeIcon grade={user.grade} width={22} height={22} />
                        </div>
                      </div>
                      <div className="flex-1 flex items-center gap-[6px] px-[12px] md:px-[12px] py-[8px] min-w-0">
                        <div className="flex flex-col gap-[4px] min-w-0 flex-1">
                          <div className="flex items-center gap-[6px]">
                            {
                              (rank === 1 || rank === 2 || rank === 3) && (
                                <div className="relative w-[22px] h-[22px] shrink-0">
                                  {rank === 1 && <RankIcon1st />}
                                  {rank === 2 && <RankIcon2nd />}
                                  {rank === 3 && <RankIcon3rd />}
                                </div>
                              )
                            }
                            <div className="bg-white border border-[#d5d5d5] px-[8px] py-[2px] rounded-[8px] text-[11px] text-[#5c5c5c] shrink-0">
                              {rank}위
                            </div>
                          </div>
                          <div className="text-[13px] font-medium text-[#5c5c5c] truncate leading-[16px]">
                            {user.nickname || "익명"}
                          </div>
                        </div>
                        <div className="h-[16px] flex items-center gap-[4px] shrink-0">
                          <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 16 16" fill="none" className="shrink-0">
                            <path d="M8.17377 0.0481988C8.1834 0.0326271 8.19596 0.0201252 8.21037 0.0117499C8.22478 0.00337451 8.24062 -0.000628204 8.25656 7.99922e-05C8.2725 0.000788189 8.28806 0.0061865 8.30194 0.0158187C8.31582 0.0254509 8.3276 0.0390338 8.33629 0.0554196L11.3323 5.55973C11.3575 5.60512 11.4038 5.62472 11.4468 5.60718L15.8683 3.80198C15.9441 3.77104 16.0174 3.85666 15.9963 3.95053L14.2584 16H1.74226L0.00344328 3.95156C-0.00125237 3.93019 -0.0011435 3.90765 0.00375838 3.88635C0.00866025 3.86505 0.0181727 3.84576 0.0312889 3.83054C0.0444051 3.81532 0.0606369 3.80472 0.0782661 3.79988C0.0958953 3.79503 0.114266 3.79612 0.131434 3.80302L4.55889 5.61131C4.59846 5.62678 4.64309 5.61131 4.66835 5.57005L8.17461 0.0481988H8.17377Z" fill="#FFB625" />
                          </svg>
                          <span className="text-[12px] font-semibold text-[#5c5c5c] leading-[16px]">{user.points.toLocaleString()}</span>
                        </div>
                      </div>
                    </Link>
                  );
                })}
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }

  // 미리보기 타입 렌더링
  if (isPreview && selectedBoardData.previewPosts) {
    return (
      <div className="h-full min-h-0 flex flex-col">
        <div className="content-stretch flex flex-col md:flex-row gap-[8px] md:gap-[16px] lg:gap-[30px] items-start w-full mb-2">
          <div className="flex items-center gap-[8px] shrink-0">
            <div className="text-[20px] leading-[20px] md:text-[24px] md:leading-[24px] lg:text-[30px] lg:leading-[30px] text-[#5c5c5c]">{categoryName || board.name}</div>
            <Link href={`/boards/${board.slug}`} aria-label={`${board.name} 게시판으로 이동`} className="shrink-0 group">
              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 19 19" fill="none" className="block group-hover:hidden">
                <path d="M10.25 12.5L13.25 9.5M13.25 9.5L10.25 6.5M13.25 9.5L5.75 9.5M18.5 9.5C18.5 14.4706 14.4706 18.5 9.5 18.5C4.52944 18.5 0.5 14.4706 0.5 9.5C0.5 4.52944 4.52944 0.5 9.5 0.5C14.4706 0.5 18.5 4.52944 18.5 9.5Z" stroke="#8C8C8C" strokeLinecap="round" strokeLinejoin="round" />
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none" className="hidden group-hover:block">
                <path fillRule="evenodd" clipRule="evenodd" d="M9.75 0C4.36522 0 0 4.36522 0 9.75C0 15.1348 4.36522 19.5 9.75 19.5C15.1348 19.5 19.5 15.1348 19.5 9.75C19.5 4.36522 15.1348 0 9.75 0ZM14.0303 10.2803C14.171 10.1397 14.25 9.94891 14.25 9.75C14.25 9.55109 14.171 9.36032 14.0303 9.21967L11.0303 6.21967C10.7374 5.92678 10.2626 5.92678 9.96967 6.21967C9.67678 6.51256 9.67678 6.98744 9.96967 7.28033L11.6893 9L6 9C5.58579 9 5.25 9.33578 5.25 9.75C5.25 10.1642 5.58579 10.5 6 10.5L11.6893 10.5L9.96967 12.2197C9.67678 12.5126 9.67678 12.9874 9.96967 13.2803C10.2626 13.5732 10.7374 13.5732 11.0303 13.2803L14.0303 10.2803Z" fill="#5C5C5C" />
              </svg>
            </Link>
          </div>
          <div className="flex items-center gap-[6px] md:gap-[6px] lg:gap-[8px] flex-wrap w-full md:w-auto min-w-0 md:flex-1 md:overflow-x-auto md:flex-nowrap no-scrollbar">
            {siblingBoards.map((sb) => (
              <button
                key={sb.id}
                onClick={() => setSelectedBoardId(sb.id)}
                className={`px-3 py-1.5 text-[12px] rounded-[12px] md:px-3.5 md:py-[6px] md:text-[13px] md:rounded-[12px] lg:px-[16px] lg:py-[8px] lg:text-[14px] lg:rounded-[14px] shrink-0 cursor-pointer ${sb.id === selectedBoardId ? "bg-[#5c5c5c] text-white border border-[#5c5c5c]" : "bg-white text-[#5c5c5c] border border-[#d5d5d5] hover:bg-[#5c5c5c] hover:text-white hover:border-[#5c5c5c] transition-colors"
                  }`}
              >
                {sb.name}
              </button>
            ))}
          </div>
        </div>
        <div className=" overflow-hidden h-full min-h-0 flex flex-col">
          <div className="flex-1 min-h-0 overflow-hidden p-0">
            <div className="px-[0px] pt-[6px] pb-[6px]">
              <div className="flex flex-col gap-[6px]">
                {selectedBoardData.previewPosts.map((post) => {
                  // attachments에서 이미지를 먼저 찾고, 없으면 content에서 추출
                  const firstImage = post.attachments?.[0]?.url || extractImageFromContent(post.content);
                  return (
                    <Link key={post.id} href={`/posts/${post.id}`} className="mx-[4px] group flex h-[72px] items-start rounded-[10px] overflow-hidden bg-white hover:bg-neutral-50 transition-shadow hover:[box-shadow:0_0_2px_0_var(--color-alpha-shadow2,_rgba(0,0,0,0.08)),_0_var(--shadow-y-3,_8px)_var(--shadow-blur-3,_16px)_0_var(--color-alpha-shadow3,_rgba(0,0,0,0.12))]">
                      <div className="h-[72px] w-[90px] relative shrink-0 bg-[#ededed] overflow-hidden">
                        {firstImage ? (
                          <img
                            src={firstImage}
                            alt={stripHtml(post.title)}
                            className="w-full h-full object-cover"
                          />
                        ) : (
                          <div className="absolute left-1/2 top-1/2 translate-x-[-50%] translate-y-[-50%] flex items-center justify-center">
                            <ImagePlaceholderIcon width={32} height={32} />
                          </div>
                        )}
                      </div>
                      <div className="flex-1 flex items-center gap-[6px] px-[10px] md:px-[10px] py-[6px] min-w-0">
                        <div className="flex flex-col gap-[4px] min-w-0 flex-1">
                          <div className="bg-white border border-[#d5d5d5] px-[8px] py-[2px] rounded-[8px] text-[11px] text-[#5c5c5c] shrink-0 w-fit">
                            {board.name}
                          </div>
                          <div className="flex items-center gap-[4px] overflow-hidden">
                            {isNewWithin1Hour(post.createdAt) && (
                              <div className="relative w-[16px] h-[16px] shrink-0">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                                  <path fillRule="evenodd" clipRule="evenodd" d="M1 8C1 4.5691 4.26184 2 8 2C11.7382 2 15 4.5691 15 8C15 11.4309 11.7382 14 8 14C7.57698 14 7.16215 13.9679 6.7588 13.9061C5.85852 14.4801 4.81757 14.8544 3.6995 14.9654C3.41604 14.9936 3.1411 14.8587 2.98983 14.6174C2.83857 14.376 2.83711 14.0698 2.98605 13.8269C3.21838 13.4482 3.38055 13.0221 3.45459 12.5659C1.97915 11.4858 1 9.86014 1 8Z" fill="#F45F00" />
                                </svg>
                                <div className="absolute inset-0 flex items-center justify-center text-[10px] text-white font-extrabold select-none">n</div>
                              </div>
                            )}
                            <span className="text-[13px] leading-[18px] text-[#5c5c5c] truncate group-hover:text-[var(--red-50,#F94B37)] group-hover:font-[700]" style={{ fontFamily: "var(--font-family-Font-1, Pretendard)" }}>{stripHtml(post.title)}</span>
                            {(post.stat?.commentsCount ?? 0) > 0 && (
                              <span className="ml-1 text-[11px] text-[#f45f00] font-bold shrink-0">[{post.stat?.commentsCount}]</span>
                            )}
                          </div>
                          <div className="h-[16px] relative">
                            <span className="absolute top-1/2 translate-y-[-50%] text-[10px] leading-[10px] tracking-[-0.24px] text-[#8c8c8c]">
                              {formatDateYmd(post.createdAt)}
                            </span>
                          </div>
                        </div>
                      </div>
                    </Link>
                  );
                })}
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }

  // 텍스트 메인 타입 또는 기본 타입 렌더링
  return (
    <div className="h-full min-h-0 flex flex-col">
      <div className="content-stretch flex flex-col md:flex-row gap-[8px] md:gap-[16px] 2xl:gap-[30px] items-start w-full mb-2">
        <div className="flex items-center gap-[8px] shrink-0">
          <div className="text-[20px] leading-[20px] md:text-[24px] md:leading-[24px] 2xl:text-[30px] 2xl:leading-[30px] text-[#5c5c5c]">{categoryName || board.name}</div>
          <Link href={`/boards/${board.slug}`} aria-label={`${board.name} 게시판으로 이동`} className="shrink-0 group">
            {/* 기본 아이콘 */}
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 19 19" fill="none" className="block group-hover:hidden">
              <path d="M10.25 12.5L13.25 9.5M13.25 9.5L10.25 6.5M13.25 9.5L5.75 9.5M18.5 9.5C18.5 14.4706 14.4706 18.5 9.5 18.5C4.52944 18.5 0.5 14.4706 0.5 9.5C0.5 4.52944 4.52944 0.5 9.5 0.5C14.4706 0.5 18.5 4.52944 18.5 9.5Z" stroke="#8C8C8C" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
            {/* 호버 아이콘 */}
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none" className="hidden group-hover:block">
              <path fillRule="evenodd" clipRule="evenodd" d="M9.75 0C4.36522 0 0 4.36522 0 9.75C0 15.1348 4.36522 19.5 9.75 19.5C15.1348 19.5 19.5 15.1348 19.5 9.75C19.5 4.36522 15.1348 0 9.75 0ZM14.0303 10.2803C14.171 10.1397 14.25 9.94891 14.25 9.75C14.25 9.55109 14.171 9.36032 14.0303 9.21967L11.0303 6.21967C10.7374 5.92678 10.2626 5.92678 9.96967 6.21967C9.67678 6.51256 9.67678 6.98744 9.96967 7.28033L11.6893 9L6 9C5.58579 9 5.25 9.33578 5.25 9.75C5.25 10.1642 5.58579 10.5 6 10.5L11.6893 10.5L9.96967 12.2197C9.67678 12.5126 9.67678 12.9874 9.96967 13.2803C10.2626 13.5732 10.7374 13.5732 11.0303 13.2803L14.0303 10.2803Z" fill="#5C5C5C" />
            </svg>
          </Link>
        </div>
        <div className="flex items-center gap-[6px] md:gap-[6px] 2xl:gap-[8px] flex-wrap w-full md:w-auto min-w-0 md:flex-1 md:overflow-x-auto md:flex-nowrap no-scrollbar">
          {siblingBoards.map((sb) => (
            <button
              key={sb.id}
              onClick={() => setSelectedBoardId(sb.id)}
              className={`px-3 py-1.5 text-[12px] rounded-[12px] md:px-3.5 md:py-[6px] md:text-[13px] md:rounded-[12px] 2xl:px-[16px] 2xl:py-[8px] 2xl:text-[14px] 2xl:rounded-[14px] shrink-0 cursor-pointer ${sb.id === selectedBoardId ? "bg-[#5c5c5c] text-white border border-[#5c5c5c]" : "bg-white text-[#5c5c5c] border border-[#d5d5d5] hover:bg-[#5c5c5c] hover:text-white hover:border-[#5c5c5c] transition-colors"
                }`}
            >
              {sb.name}
            </button>
          ))}
        </div>
      </div>
      <div className="rounded-xl overflow-hidden h-full min-h-0 flex flex-col bg-white">
        {!isTextMain && (
          <div className="px-3 py-2 border-b border-neutral-200 flex items-center justify-between">
            <Link href={`/boards/${board.slug}`} className="text-lg md:text-xl font-bold text-neutral-800 truncate">{board.name}</Link>
            <Link href={`/boards/${board.slug}`} className="text-xs px-3 py-1 rounded-full border border-neutral-300 text-neutral-700 hover:bg-neutral-100">더보기</Link>
          </div>
        )}
        <div className="flex-1 min-h-0 overflow-hidden p-0">
          {isTextMain && selectedBoardData.textPosts ? (
            <div className="bg-white px-[24px] pt-[8px] pb-[16px]">
              <ul className="min-h-[326px]">
                {selectedBoardData.textPosts.map((p) => (
                  <li key={p.id} className="border-b border-[#ededed] h-[28px] pl-0 pr-[4px] pt-0 pb-0">
                    <div className="flex items-center justify-between w-full">
                      <Link href={`/posts/${p.id}`} className="group flex items-center gap-[4px] h-[24px] overflow-hidden flex-1 min-w-0 cursor-pointer">
                        {isNewWithin1Hour(p.createdAt) && (
                          <div className="relative w-[16px] h-[16px] shrink-0">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                              <path fillRule="evenodd" clipRule="evenodd" d="M1 8C1 4.5691 4.26184 2 8 2C11.7382 2 15 4.5691 15 8C15 11.4309 11.7382 14 8 14C7.57698 14 7.16215 13.9679 6.7588 13.9061C5.85852 14.4801 4.81757 14.8544 3.6995 14.9654C3.41604 14.9936 3.1411 14.8587 2.98983 14.6174C2.83857 14.376 2.83711 14.0698 2.98605 13.8269C3.21838 13.4482 3.38055 13.0221 3.45459 12.5659C1.97915 11.4858 1 9.86014 1 8Z" fill="#F45F00" />
                            </svg>
                            <div className="absolute inset-0 flex items-center justify-center text-[10px] text-white font-extrabold select-none">n</div>
                          </div>
                        )}
                        <span className="text-[14px] leading-[20px] text-[#5c5c5c] truncate max-w-[calc(100vw-280px)] group-hover:text-[var(--red-50,#F94B37)] group-hover:font-[700]" style={{ fontFamily: "var(--font-family-Font-1, Pretendard)" }}>{stripHtml(p.title)}</span>
                        {(p.stat?.commentsCount ?? 0) > 0 && (
                          <span className="text-[14px] text-[#f45f00] font-bold">[{p.stat?.commentsCount}]</span>
                        )}
                      </Link>
                      <span className="text-[12px] leading-[12px] tracking-[-0.24px] text-[#8c8c8c]">{formatDateYmd(p.createdAt)}</span>
                    </div>
                  </li>
                ))}
              </ul>
            </div>
          ) : (
            <PostList key={board.id} boardId={board.id} sort="recent" titleHoverOrange pageSizeOverride={16} compact />
          )}
        </div>
      </div>
    </div>
  );
}

