"use client";

import React from "react";
import { Modal } from "@/app/components/ui/Modal";
import Link from "next/link";

type Props = {
  count: number;
};

export default function UnreadMessagesModal({ count }: Props) {
  const [open, setOpen] = React.useState(true);
  const onClose = () => setOpen(false);
  if (!open || count <= 0) return null;
  return (
    <Modal open={open} onClose={onClose}>
      <div className="w-[420px] max-w-[92vw] rounded-lg border border-neutral-200 shadow-xl">
        <div className="px-5 py-4 border-b border-neutral-200">
          <h3 className="text-base font-semibold text-neutral-900">알림</h3>
        </div>
        <div className="p-5">
          <p className="text-sm text-neutral-800">
            안읽은 쪽지가 있습니다{count > 0 ? ` (${count}개)` : ""}.
          </p>
        </div>
        <div className="px-5 pb-5 flex items-center justify-end gap-2">
          <button
            onClick={onClose}
            className="h-9 px-4 rounded-md border border-neutral-300 bg-white text-sm hover:bg-neutral-100"
          >
            닫기
          </button>
          <Link
            href="/my-page?tab=messages-received"
            className="h-9 px-4 rounded-md bg-neutral-900 text-white text-sm hover:bg-neutral-800 inline-flex items-center justify-center text-center"
          >
            바로 확인
          </Link>
        </div>
      </div>
    </Modal>
  );
}


