import Link from 'next/link';
import { notFound } from 'next/navigation';
import BackCircleSvg from '../../svgs/backcirclesvg';
import { MOCK_NOTICES } from '../../admin/notices/mockData';

export default async function NoticeDetailPage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;
  const numericId = Number(id);
  const item = MOCK_NOTICES.find((r) => r.id === numericId);
  if (!item || !item.content) return notFound();

  return (
    <div className="w-full bg-white">
      <div className="flex justify-center">
        <div className="w-full max-w-[1440px]">
          {/* 상단 타이틀 */}
          <div className="h-[100px] flex items-center gap-3 px-8">
            <Link
              href="/notices"
              aria-label="뒤로 가기"
              className="size-8 rounded-full inline-flex items-center justify-center text-[#8C95A1] hover:bg-black/5 no-underline"
            >
              <BackCircleSvg width={32} height={32} />
            </Link>
            <h1 className="m-0 text-[24px] font-bold leading-normal text-[#1B2027]">
              공지사항 상세
            </h1>
          </div>

          {/* 카드 */}
          <section className="px-8 pb-8">
            <div className="rounded-[8px] border border-[#DEE1E6] overflow-hidden bg-white">
              {/* 헤더 */}
              <div className="p-8">
                <h2 className="m-0 text-[20px] font-bold leading-normal text-[#333C47]">
                  {item.title}
                </h2>
                <div className="mt-2 flex items-center gap-4 text-[13px] leading-[1.4]">
                  <span className="text-[#8C95A1]">작성자</span>
                  <span className="text-[#333C47]">{item.writer}</span>
                  <span className="w-px h-4 bg-[#DEE1E6]" />
                  <span className="text-[#8C95A1]">게시일</span>
                  <span className="text-[#333C47]">{item.date}</span>
                  <span className="w-px h-4 bg-[#DEE1E6]" />
                  <span className="text-[#8C95A1]">조회수</span>
                  <span className="text-[#333C47]">{item.views.toLocaleString()}</span>
                </div>
              </div>

              {/* 구분선 */}
              <div className="h-px bg-[#DEE1E6] w-full" />

              {/* 본문 */}
              <div className="p-8">
                <div className="text-[15px] leading-normal text-[#333C47] space-y-2">
                  {item.content.map((p, idx) => (
                    <p key={idx} className="m-0">
                      {p}
                    </p>
                  ))}
                </div>
              </div>
            </div>
          </section>
        </div>
      </div>
    </div>
  );
}