---
import Icon from '@ui/Icon.astro'
import CardTitle from '@ui/CardTitle.astro'

interface Props {
  city?: string
  temperature?: string | number
  color?: string
  icon?: string
  description?: string
}

const { city = 'Warsaw', temperature = 20, color = 'blue', icon = 'cloud-rain', description = 'Cloudy morning' } = Astro.props
---

<div class={`card card-gradient card-gradient-${color} card-gradient-end`}>
  <div class="card-body">
    <div class="row">
      <div class="col">
        <div class="row">
          <div class="col-auto">
            <CardTitle class="mb-2">{city}</CardTitle>
          </div>
          <div class="col">
            <Icon name={icon} />
          </div>
        </div>
        <div class="text-secondary">
          {description}
        </div>
      </div>
      <div class="col-auto">
        <div class="display-5 lh-1 fw-lighter">{temperature}&deg;</div>
      </div>
    </div>
  </div>
</div>