---
import type { servicesSchema } from '@/content.config'
import type { z } from 'astro:content'

type Props = z.infer<typeof servicesSchema> & { highlighted?: boolean }

const { title, description, charachteristics, highlighted = false, link } = Astro.props
---

<div
  class:list={[
    'flex h-full w-full flex-col border-2 px-5 py-6 md:min-h-[550px] md:max-w-[400px] md:px-7 md:py-8',
    'border border-transparent bg-card',
    { 'border-brand': highlighted },
  ]}
>
  <div class="mb-8 flex flex-col gap-2">
    <h3 class="text-2xl font-bold">{title}</h3>
    {description && <span>{description}</span>}
  </div>

  <ul class="mb-16 flex-grow space-y-4">
    {
      charachteristics?.map((charachteristic) => (
        <li class="flex items-start justify-between space-x-2">
          <span class="text-text-light">{charachteristic.text}</span>
          {charachteristic.price && (
            <span class="ml-2 text-nowrap text-end text-brand" set:html={charachteristic.price} />
          )}
        </li>
      ))
    }
  </ul>

  {
    link && (
      <a href={link.href} target={link.target} class="brand-btn-outline">
        {link.title}
      </a>
    )
  }
</div>