import { h } from "preact"
import { Color } from "UnityEngine"
import { Heart } from "@/comps/vigor/heart"
 
export const SingleHeartDemo = () => {
    return <div class="w-[340px] h-[200px] bg-slate-700 p-10 rounded flex-row justify-between items-center">
        <Heart size={60} />
        <Heart size={60} rightColor={new Color(1, 0, 0, 0.1)} />
        <Heart size={60} leftColor={new Color(1, 1, 0)} rightColor={new Color(1, 1, 0, 0)} />
    </div>
}

import { h } from "preact"
import { HeartMeter } from "@/comps/vigor/heart"
import { RangeSlider, Slider } from "@/comps/echo/slider"
import { useState } from "onejs-preact/hooks"
 
export const HeartMeterDemo = () => {
    const [value, setValue] = useState(17)
    const [max, setMax] = useState(26)
    const [shield, setShield] = useState(17)
 
    function onChange(value: [number, number]) {
        setValue(value[0])
        setMax(value[1])
    }
 
    return <div class="w-[340px] h-[280px] p-10 bg-teal-500/10 rounded justify-between items-between">
        <HeartMeter value={value} max={max} shield={shield} heartSize={20} heartClass="m-1" />
        <div class="">
            <RangeSlider
                min={0} max={32} step={1} value={[value, max]}
                onChange={onChange}
                activeTrackClass="bg-red-500"
                handle={[
                    <div class="w-8 h-8 bg-white border-2 border-red-500 rounded justify-center items-center bold text-red-500">{parseInt(value + "")}</div>,
                    <div class="w-8 h-8 bg-white border-2 border-red-500 rounded justify-center items-center bold text-red-500">{parseInt(max + "")}</div>
                ]}
            />
            <Slider
                min={0} max={20} value={shield} step={1}
                onChange={setShield}
                activeTrackClass="bg-yellow-400"
                handle={<div class="w-8 h-8 bg-white border-2 border-yellow-500 rounded justify-center items-center text-yellow-500 bold">{shield}</div>}
            />
        </div>
    </div>
}