---
import type { TranslationKey } from '@/i18n/ui';

interface Props {
  href: string;
  title: string;
  description: string;
  Icon: any;
  borderColor?: string;
}

const { href, title, description, Icon, borderColor = 'var(--color-hds-naranja)' } = Astro.props;
---
<a
  href={href}
  class="service-card group flex flex-col h-full"
  style={`border-top: 4px solid ${borderColor}; padding-top: 1.5rem;`}
>
  <div class="icon-circle mb-5" style="width: 48px; height: 48px;">
    <Icon class="w-6 h-6" />
  </div>
  <h3 class="text-xl font-semibold mb-2 transition-colors" style="color: var(--hds-fg);">
    {title}
  </h3>
  <p class="text-sm leading-relaxed mb-4 flex-grow" style="color: var(--hds-fg-soft);">
    {description}
  </p>
  <span class="btn-ghost mt-auto">
    Ver detalles
    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
      <line x1="5" y1="12" x2="19" y2="12"/>
      <polyline points="12 5 19 12 12 19"/>
    </svg>
  </span>
</a>
