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

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

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

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

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

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