dc-copy/src/CommentHeader.tsx

import { useState } from 'react';
import { Separator } from './Separator';

function CommentHeader({
  onCloseComment,
  commentCount = 0,
  commnetClosed = false,
}: {
  onCloseComment?: (c: boolean) => void;
  commentCount?: number;
  commnetClosed?: boolean;
}) {
  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
  const [selectedSort, setSelectedSort] = useState('등록순'); // Default sort option

  const sortOptions = ['등록순', '최신순', '답글순']; // Changed '답글수' to '답글순' to match list item

  const handleSortSelection = (option: string) => {
    setSelectedSort(option);
    setIsDropdownOpen(false);
  };

  return (
    <div className="h-[38px] leading-[38px] font-bold flex items-center justify-between bg-transparent text-[12px]">
      {/* Left Section */}
      <div className="flex items-center space-x-1">
        <span>전체 댓글</span>
        <em className="text-custom-red-text not-italic font-normal bg-transparent">
          <span className="bg-transparent">{commentCount}</span>
        </em>
        <span>개</span>

        {/* Custom Dropdown */}
        <div className="relative inline-block ml-1 box-border leading-0"> {/* Adjusted margin from original margin-left: 4px */}
          <div
            className="relative inline-block bg-white w-[55px] h-[19px] pl-[5px] border border-custom-border-gray text-[11px]
             text-custom-gray-dark leading-[18px] align-[1px] cursor-pointer font-normal font-apple-dotum"
            onClick={() => setIsDropdownOpen(!isDropdownOpen)}
          >
            <span className="bg-transparent">{selectedSort}</span>
            <span className="sr-only">정렬 기준선택</span> {/* Screen reader only text */}
            <em className="inline-block absolute right-[5px] top-[7px] w-[9px] h-[5px] bg-sp-img bg-[-126px_-43px]"></em>
          </div>

          {/* Dropdown List */}
          {isDropdownOpen && (
            <ul className="absolute box-border left-[-1px] top-[19px] z-20 w-[62px] list-none bg-custom-dropdown-bg border border-custom-border-gray pt-[6px] px-[5px] pb-[4px]">
              {sortOptions.map((option) => (
                // Original had strange inline-block and font-size: 0px. Using block and sensible text size.
                <li
                  key={option}
                  className="block leading-[16px] text-xs text-custom-dropdown-text font-normal font-apple-dotum cursor-pointer hover:bg-gray-200" // Added hover state
                  onClick={() => handleSortSelection(option)}
                >
                  {option}
                </li>
              ))}
            </ul>
          )}

          {/* Hidden Select (kept for structure reference, usually not needed with custom dropdown) */}
          <select className="hidden absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer font-apple-dotum text-xs align-middle">
            <option>등록순</option>
            <option>최신순</option>
            <option>답글순</option> {/* Changed from 답글수 */}
          </select>
        </div>

        {/* Hidden Reply Expand Button */}
        <button className="hidden cursor-pointer align-middle font-apple-dotum text-xs h-[21px] ml-[71px] mt-[-1px]">
          <span className="sr-only">답글 펼침 설정</span>
          <em className="inline-block w-[21px] h-[21px] bg-sp-img bg-[-84px_-52px]"></em>
        </button>
      </div>

      {/* Right Section */}
      <div className="flex items-center"> {/* Use space-x for spacing */}
        <a href="#" className="text-custom-gray-dark align-middle leading-[15px] font-apple text-[13px] font-bold no-underline hover:underline">
          본문 보기
        </a>
        <Separator className='mx-2.5' />
        <button className="cursor-pointer align-middle font-apple text-[13px] text-custom-gray-dark font-bold flex items-center"
          onClick={() => onCloseComment?.(!commnetClosed)}
        >
          {commnetClosed ? (<>
            <span className="font-apple text-[13px] text-custom-gray-dark font-bold">댓글열기</span>
            <em className="inline-block w-[9px] h-[5px] bg-sp-img bg-[-115px_-43px] ml-1 align-[2px]"></em>
          </>) : (
            <>
              <span className="font-apple text-[13px] text-custom-gray-dark font-bold">댓글닫기</span>
              <em className="inline-block w-[9px] h-[5px] bg-sp-img bg-[-84px_-52px] ml-1 align-[2px]"></em>
            </>
          )}
        </button>
        <Separator className='mx-2.5' />
        <button className="cursor-pointer align-middle font-apple text-[13px] text-custom-gray-dark font-bold">
          새로고침
        </button>
      </div>
    </div>
  );
}

export function CommentMenuList({
  onCloseComment,
  commnetClosed = false,
}: {
  onCloseComment?: (c: boolean) => void;
  commnetClosed?: boolean;
}) {
  return <div className="flex items-center"> {/* Use space-x for spacing */}
    <a href="#" className="text-custom-gray-dark align-middle leading-[15px] font-apple text-[13px] font-bold no-underline hover:underline">
      본문 보기
    </a>
    <Separator className='mx-2.5' />
    <button className="cursor-pointer align-middle font-apple text-[13px] text-custom-gray-dark font-bold flex items-center"
      onClick={() => onCloseComment?.(!commnetClosed)}
    >
      {commnetClosed ? (<>
        <span className="font-apple text-[13px] text-custom-gray-dark font-bold">댓글열기</span>
        <em className="inline-block w-[9px] h-[5px] bg-sp-img bg-[-115px_-43px] ml-1 align-[2px]"></em>
      </>) : (
        <>
          <span className="font-apple text-[13px] text-custom-gray-dark font-bold">댓글닫기</span>
          <em className="inline-block w-[9px] h-[5px] bg-sp-img bg-[-84px_-52px] ml-1 align-[2px]"></em>
        </>
      )}
    </button>
    <Separator className='mx-2.5' />
    <button className="cursor-pointer align-middle font-apple text-[13px] text-custom-gray-dark font-bold">
      새로고침
    </button>
  </div>
}

export default CommentHeader;