import { Edit2, LucideArrowLeft, PlusIcon, Trash2 } from "lucide-react"
import { useRouter } from "next/navigation"
import PricePlanDetailState from "../../state/price-plan-detail-state"

const themeColor = "#00879E"

interface Props {
    mainState: PricePlanDetailState
}

const PricePlanHeader = ({
    mainState
}: Props) => {

    const router = useRouter()

    const {
        getName,
        getVersion,
    } = mainState

    return (
        <section className="flex border-y px-4 py-3 items-center justify-between bg-white shadow-sm">
            <div className={`flex gap-4 items-center font-bold text-[${themeColor}]`}>
                <LucideArrowLeft className="ml-4 cursor-pointer hover:text-[#006876]" onClick={() => router.back()} />
                <h1 className="text-xl text-[#00879E]">Price Plan</h1>
            </div>
            <div className="ml-14 font-normal flex gap-2 items-center text-gray-600">
                <span>Subscription Price</span>
                <span>|</span>
                <span className="font-medium text-[#00879E]">{getName()}</span>
                <span>-</span>
                <span>Version:</span>
                <span className="text-sm font-bold text-[#00879E]">{getVersion()}</span>
            </div>
            <div className="flex items-center gap-3 mr-8 text-[#00879E]">
                <Edit2 width={16} className="cursor-pointer hover:text-[#006876]" />
                <PlusIcon width={20} className="cursor-pointer hover:text-[#006876]" />
                <Trash2 width={16} className="cursor-pointer hover:text-red-500" />
            </div>
        </section>
    )
}

export default PricePlanHeader