import { ImageIcon } from "@/components/core/Icon";
import { AvailableDates, MealPackageVariantType } from "@/types/home/meal-package";
import UiRadioButton from "../UiRadioButton";
import { cn } from "@/lib/utils";
import { MealPackageVariantSelected } from "@/types/home/bookings";
import UiImageIcon from "../UiImageIcon";
import { useState } from "react";


export default function MealPackageVarinat({ variant, selectedVariant, onSelect }: { variant: MealPackageVariantType, selectedVariant: MealPackageVariantSelected | null, onSelect: (varinat: MealPackageVariantType | null) => void }) {

    const is_selected = selectedVariant ? selectedVariant.id === variant.id : false

    const [iconShow, setIconShow] = useState(true)


    return <div onClick={() => onSelect(variant)} className={cn("flex justify-between items-start border p-2.5 rounded-xs cursor-pointer  w-full gap-2", is_selected ? "bg-main/5 border-main/40 text-main" : "hover:bg-neutral-100")}  >

        <UiRadioButton className="mt-1" checked={is_selected} />
        {
            iconShow && <div className="h-10 w-10 min-w-10  rounded-md bg-main/10 flex items-center justify-center">
                <UiImageIcon is_icon={variant.is_icon} value={variant.icon_value} setIconShow={setIconShow} className="text-main w-6 h-6" />
            </div>
        }
        <div className="flex-1">
            <div className="flex justify-between items-start text-black">
                <h2 className="text-sm">{variant.title}</h2>
                <span className="text-sm font-semibold whitespace-nowrap">LKR {variant.price}</span>

            </div>
            <p className="text-sm text-neutral-500">{variant.description}</p>
        </div>
    </div>
}
