import styles from './MusicRow.module.css'
import {useRouter} from "next/router";
import useTranslation from 'next-translate/useTranslation'

type Props = {
    onClick?: (music) => void,
    music: any,
    disableSelect?: boolean,
    isValid?:boolean
}

export default function MusicRow(props: Props) {
    const router = useRouter()
    const { t, lang } = useTranslation('common')
    return (
        <div className={styles.container}  >
        <div className={styles.card}  onClick={() => props.onClick && props.onClick(props.music)}>
            <span className={styles.identifier}>{props.music.identifier}</span>
            <div className={styles.row} >
            <span className={styles.title}>{props.music["name_" + lang]}</span>
                {props.music.isValid &&
                 <img  style={{ position: "absolute", right: 12, height:20, width: "auto"}} src={"/icon/selected-sound-bg.png"} />
                }
            </div>
        </div>
        </div>
    )
}