---
import type { AvatarSize } from './Avatar.astro'
import type { FlagCountry } from '@shared/lib/tokens'

interface Props {
  /** country code from the `$flag-countries` SCSS list */
  flag: FlagCountry
  /** core/scss/_variables.scss `$flag-sizes` (aliased to `$avatar-sizes`) */
  size?: AvatarSize | undefined
  class?: string
  /** accessible name (role="img" + aria-label) */
  ariaLabel?: string | undefined
  /** remaining attributes (id, data-*, aria-*, …) are forwarded to the root element */
  [key: string]: unknown
}

const { flag, size, class: className, ariaLabel, ...rest } = Astro.props

const classes = ['flag', size && `flag-${size}`, `flag-country-${flag.toLowerCase()}`, className]
---

<span class:list={classes} role={ariaLabel ? 'img' : undefined} aria-label={ariaLabel} {...rest}></span>