import {IconButton, Rating} from "@mui/material";
import CloseIcon from '@mui/icons-material/Close';
import NameField from "~/components/itemDialog/NameField";
import {useState} from "react";

export default function QualityItem({ name, value, setValue, labels }:{ name: string|undefined, value: number, setValue: Function, labels: { [key: string]: string} }) {
    const [hoverText, setHoverText] = useState(0);

    return (
        <>
            <div style={{display: "flex", flexDirection: "column", alignItems: "start", marginBottom: "10px"}}>
                <span style={{fontSize: "1.2rem", marginBottom: "3px"}}>{name}</span>
                <div style={{display: "flex", alignItems: "center"}}>
                    <Rating
                        defaultValue={0}
                        value={value}
                        precision={0.5}
                        onChange={(event, newValue) => {
                            setValue(newValue ? newValue : 0);
                        }}
                        onChangeActive={(event, newHover) => {
                            setHoverText(newHover);
                        }}
                    />
                    <span style={{marginLeft: "5px"}}>{labels[hoverText !== -1 ? hoverText : value]}</span>
                </div>
            </div>
        </>
    )
}