fp/packages/next/app/components/thumbnail.tsx

'use client'
import LinkableHeading from "./linkable-heading"
import Image from "next/image"
import { useState } from "react"
import styles from '@/assets/styles/fp.module.css'


export default function Thumbnail({url}: { url: string }) {
    const [isBig, setIsBig] = useState(false)

    return (
        <div>
            <Image
                className={(isBig) ? styles.zoomout : styles.zoomin}
                onClick={() => setIsBig(!isBig)}
                src={url} 
                alt="A composite image showing several frames from the source video"
                width={(isBig) ? 1920 : 192}
                height={(isBig) ? 1080 : 108}
                quality={(isBig) ? 100 : 75}
            ></Image>
        </div>
    )
}