"use client";

import { motion } from "framer-motion";
import React from "react";

interface ModalBackdropProps {
	/** 背景フェードの時間（秒） */
	duration?: number;
	/** デフォルトの背景クラスを上書きしたい場合 */
	className?: string;
}

/**
 * ModalBackdrop
 * 全モーダルで共通使用する背景フェードコンポーネント
 *
 * 例:
 * <ModalBackdrop />                     // デフォルトの黒背景
 * <ModalBackdrop className="bg-white/30" /> // 明るい背景など個別調整も可能
 */
export default function ModalBackdrop({
	duration = 0.2,
	className = "fixed inset-0 bg-black/40 backdrop-blur-sm",
}: ModalBackdropProps) {
	return (
		<motion.div
			key="backdrop"
			className={className}
			aria-hidden="true"
			initial={{ opacity: 0 }}
			animate={{ opacity: 1 }}
			exit={{ opacity: 0 }}
			transition={{ duration }}
		/>
	);
}