---
export interface Props {
  skillLevel: number;
  tileLevel: number;
}

const { skillLevel, tileLevel } = Astro.props;

const isFilled = skillLevel >= tileLevel;
const classes = /* tw */ {
  filled: 'bg-gray-500 dark:bg-gray-300',
  empty: 'bg-gray-200 dark:bg-gray-500',
};
---

<div
  class:list={[
    'w-9 h-2 last:rounded-l-none last:rounded-r-sm first:rounded-l-sm first:rounded-r-none',
    isFilled ? classes.filled : classes.empty,
  ]}
>
</div>
