"use client";

import Modal from "../elements/Modal";
import ChatBoldIcon from "./ChatBoldIcon";
import { useTranslation } from "react-i18next";

interface ChatGuideModalProps {
  open: boolean;
  onClose: () => void;
}

export default function ChatGuideModal({ open, onClose }: ChatGuideModalProps) {
  const { t } = useTranslation("common");

  const items = [
    {
      title: t("chats.guide.deleteTitle"),
      body: t("chats.guide.deleteBody"),
      icon: "delete" as const,
    },
    {
      title: t("chats.guide.viewOnceTitle"),
      body: t("chats.guide.viewOnceBody"),
      icon: "eye" as const,
    },
    {
      title: t("chats.guide.timedTitle"),
      body: t("chats.guide.timedBody"),
      icon: "timer" as const,
    },
  ];

  if (!open) return null;

  return (
    <Modal isOpen={open} onClose={onClose} height="auto">
      <div className="flex flex-col gap-4 px-4 pb-5 pt-2">
        <div className="flex items-center justify-between">
          <h2 className="text-base font-bold text-neutral-900 dark:text-neutral-50">
            {t("chats.guide.title")}
          </h2>
          <button
            type="button"
            onClick={onClose}
            className="gentle-transition flex h-9 w-9 items-center justify-center rounded-full bg-black/5 text-lg leading-none text-neutral-600 active:scale-90 dark:bg-white/10 dark:text-neutral-300"
            aria-label={t("chats.actions.close")}
          >
            ×
          </button>
        </div>

        <ul className="flex flex-col gap-3">
          {items.map((item) => (
            <li
              key={item.title}
              className="glass-panel flex items-start gap-3 rounded-2xl p-3"
            >
              <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-[#2aabee]/15 text-[#248cc8]">
                <ChatBoldIcon name={item.icon} size={18} />
              </span>
              <div className="min-w-0 text-right">
                <p className="text-sm font-semibold text-neutral-900 dark:text-neutral-50">
                  {item.title}
                </p>
                <p className="mt-1 text-xs leading-6 text-neutral-500 dark:text-neutral-400">
                  {item.body}
                </p>
              </div>
            </li>
          ))}
        </ul>
      </div>
    </Modal>
  );
}
