---
import { Image, Column, Link } from '../../@dasig'

interface Props {
  avif: string
  webp: string
  name: string
  description: string
  site: string
}

const { avif, webp, name, description, site } = Astro.props
---

<section class="card">
  <Link to={site} newtab>
    <Column>
      <Image avif={avif} webp={webp} size={140} />
      <span class="card__name">{name}</span>
      <span class="card__description">{description}</span>
    </Column>
  </Link>
</section>

<style lang="sass">
  @use 'sass:color'
  @use '../../configs/design/sizes.sass' as view
  $background: rgba(12, 26, 48, 0.2)

  .card
    backdrop-filter: blur(6px) saturate(100%)
    background-color: $background
    border: 1px solid color.adjust($background, $lightness: 15%)
    padding: 2.25rem
    cursor: pointer
    width: 14rem
    height: 12rem
    transition: all 0.2s ease-out

    &:hover
      background-color: rgba(12, 26, 48, 0.6)
      transform: scale(1.10)
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1)

    &__name
      padding: 1rem 0 0 0
      font-size: 1rem
      font-weight: 500

    &__description
      padding: 0.5rem 0 0 0
      font-size: 0.75rem

    @media only screen and (min-width: 0px) and (max-width: view.$tablet)
      background-color: color.adjust($background, $lightness: 15%)
      border: 1px solid color.adjust($background, $lightness: 25%)
      padding: 1.25rem

      &:hover
        background-color: color.adjust($background, $blackness: 35%)
        border: 1px solid color.adjust($background, $blackness: 25%)
        transform: scale(1.05)
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1)
</style>
