---
import Progress from '@ui/Progress.astro'
import PeopleAvatarList from '@shared/components/demo/PeopleAvatarList.astro'
import Icon from '@ui/Icon.astro'
import CardTitle from '@ui/CardTitle.astro'

interface Props {
  title?: string
  badge?: string
  offset?: number
  limit?: number
  percentageColor?: string
  due?: string
  value?: number
}

const { title = 'Task Title', badge, offset = 40, limit = 7, percentageColor = 'green', due = '2 days', value = 20 } = Astro.props
---

<div class="card">
  <Progress value={value} class="card-progress" color={percentageColor} />
  <div class="card-body">
    <CardTitle>
      <a href="#">{title}</a>
      {
        badge && (
          <Fragment>
            {' '}
            <span class="badge ms-2">{badge}</span>
          </Fragment>
        )
      }
    </CardTitle>

    <PeopleAvatarList offset={offset} limit={limit} stacked class="mb-3" />

    <div class="card-meta d-flex justify-content-between">
      <div class="d-flex align-items-center">
        <Icon name="check" class="me-2" />
        <span>5/10</span>
      </div>
      <span>Due {due}</span>
    </div>
  </div>
</div>