---
import type { HTMLAttributes } from 'astro/types';

export interface Props extends HTMLAttributes<'div'> {
    name: string;
    url: string;
    cols?: number;
    rows?: number;
    height: number;
    width: number;
    speed?: number;
}

const {
    is: Is='div',
    name='sprite-animation',
    url,
    cols=1,
    rows=1,
    height,
    width,
    speed=1000,
    class: _class,
    ...attrs
} = Astro.props

const horizontal = cols > 1 && rows === 1 ? true : false
const vertical = rows > 1 && cols === 1 ? true : false
const grid = cols > 1 && rows > 1 ? true : false
---

<Is {...attrs} class:list={[name, _class]}>
    <slot />
</Is>

<style set:html={` .${name} { height: ${height / rows}px; width: ${width / cols}px; background: transparent url(${url}) 0 0 no-repeat; animation: ${horizontal?`${name}-x ${speed}ms steps(${cols}) infinite;`:''} ${vertical?`${name}-y ${speed}ms steps(${rows}) infinite;`:''} ${grid?`${name}-x ${speed}ms steps(${cols}) infinite,${name}-y ${speed * rows}ms steps(${rows}) infinite;`:''} } ${ horizontal || grid ? ` @keyframes ${name}-x { 0% {background-position-x: 0px;} 100% { background-position-x: -${width}px; } } `:''} ${ vertical || grid ? ` @keyframes ${name}-y { 0% {background-position-y: 0px;} 100% { background-position-y: -${height}px; } } `:''} `}/>