import React from 'react';
import {MajorProject} from "@/data/project";

interface CommonModalProps {
    isOpen: boolean;
    onClose: () => void;
    item: MajorProject | null;
}

/**
 * 프로젝트 상세 정보를 보여주는 모달 컴포넌트
 */
export const CommonModal: React.FC<CommonModalProps> = ({ isOpen, onClose, item }) => {
    if (!isOpen) return null;

    return (
        <div
            className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-sm"
            onClick={onClose}
        >
            <div
                className="relative bg-white w-[1222px] h-[901px] p-10 rounded-lg overflow-hidden"
                onClick={(e) => e.stopPropagation()}
            >
                {/* 닫기 버튼 */}
                <button
                    className="absolute top-6 right-6 text-black text-2xl font-light cursor-pointer"
                    onClick={onClose}
                >
                    ×
                </button>

                {/* 제목 및 정보 */}
                <div className="mb-6">
                    <h2 className="text-4xl font-extrabold mb-2">{item.title}</h2>
                    <div className="text-base font-light space-y-1">
                        <p>발주처 : {item.client}</p>
                        <p>계약금액 : {item.contractAmount}</p>
                        <p>공사기간 : {item.period}</p>
                    </div>
                </div>

                {/* 이미지 및 컨트롤 */}
                <div className="relative w-full h-[578px] flex justify-center items-center">
                    {/*<img*/}
                    {/*    src={}*/}
                    {/*    alt={images[currentIndex]?.alt || `image-${currentIndex}`}*/}
                    {/*    className="rounded max-h-full"*/}
                    {/*/>*/}
                    <button onClick={() => {}} className="absolute left-4 top-1/2 -translate-y-1/2 bg-gray-300/75 w-14 h-14 text-2xl">{'<'}</button>
                    <button onClick={() => {}} className="absolute right-4 top-1/2 -translate-y-1/2 bg-gray-300/75 w-14 h-14 text-2xl">{'>'}</button>
                </div>

                {/* 페이지 인디케이터 */}
                {/*<div className="flex justify-center gap-2 mt-4">*/}
                {/*    {images.map((_, idx) => (*/}
                {/*        <div*/}
                {/*            key={idx}*/}
                {/*            className={`w-2 h-2 rounded-full ${*/}
                {/*                idx === currentIndex ? 'bg-blue-900' : 'bg-blue-900/20'*/}
                {/*            }`}*/}
                {/*        />*/}
                {/*    ))}*/}
                {/*</div>*/}
            </div>
        </div>
    );
};
