/* eslint-disable @typescript-eslint/no-explicit-any */
import styles from "./watch-item.module.scss"
import { Link } from "@inertiajs/react"

interface WatchListItemProps {
  logo: any;
  name: any;
  slug: any;
  value: any;
  usdValue: any;
}

const WatchListItem = ({ logo, name, slug, value, usdValue }: WatchListItemProps) => {
  return (
    <Link href={ `/dashboard/assets?asset=${ name }?slug=${ slug }` } className={ styles["watchitem"] }>
        <div className={ styles["watchitem__left"] }>
            <img src={ logo } />
            <div className={ styles["watchitem__left--text"] }>
                <h3>{name}</h3>
                <p>{slug}</p>
            </div>
        </div>
        <div className={ styles["watchitem__right"] }>
            <h4>{slug} {value}</h4>
            <p>${usdValue}</p>
        </div>
    </Link>
  )
}

export default WatchListItem