import PricePlanDetailState from "@/lib/price-plan-detail/state/price-plan-detail-state"
import { observer } from "mobx-react-lite"

interface Props {
    mainState: PricePlanDetailState
}

const CreateEvent = observer(({mainState}: Props) => {
    if (mainState.getFlow() >= 1) return null

    return (
        <>
            <div className="flex flex-col items-center text-center">
                <button
                    className="relative w-24 h-24 rounded-full border-4 border-[#00879E] bg-white flex items-center justify-center hover:bg-[#e6f6f8] transition"
                    onClick={() => mainState.setUsageEventModalIsOpen(!mainState.getUsageEventModalIsOpen())}
                >
                    <svg className="w-10 h-10 text-[#00879E]" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
                        <path d="M4 4h16v16H4V4z" />
                        <path d="M8 8h8M8 12h8M8 16h8" />
                    </svg>
                    <span className="absolute -top-2 -right-2 w-6 h-6 rounded-full bg-[#00879E] text-white text-sm font-bold flex items-center justify-center">+</span>
                </button>
                <span className="mt-2 text-[#00879E] font-medium">Event</span>
            </div>
            <div className="text-[#00879E] text-3xl">{'→'}</div>
        </>
    )
})

export default CreateEvent