---
import type { TimelineProps } from './timeline'

import { classNames } from '../../utils/classNames'

import styles from './timeline.module.scss'

export type Props = TimelineProps

const {
    theme,
    counter,
    alternate,
    centered,
    color,
    textColor,
    className
} = Astro.props

const classes = [
    styles.timeline,
    theme && theme.split(' ').map(style => styles[style]),
    alternate && styles.alternate,
    centered && styles.centered,
    className
]

const styleVariables = classNames([
    color && `--w-timeline-color: ${color};`,
    textColor && `--w-timeline-text-color: ${textColor};`,
    counter && `--w-timeline-counter: ${counter};`
])
---

<ul class:list={classes} style={styleVariables}>
    <slot />
</ul>