import type { PackageCardData } from '../data/content';
import { handleAnchorClick } from '../../../utils/scrollToHash';

export function PackageCard({ pkg }: { pkg: PackageCardData }) {
  return (
    <div
      className={`relative flex flex-col rounded border p-8 transition-all hover:-translate-y-1 ${
        pkg.featured
          ? 'border-accent-line bg-surface-2'
          : 'border-line bg-surface hover:border-accent-line'
      }`}
      data-testid={`package-card-${pkg.id}`}
    >
      {pkg.featured && (
        <span className="font-mono absolute -top-3 left-7 rounded-full bg-accent px-3 py-1 text-[0.7rem] font-bold uppercase tracking-wide text-[var(--color-accent-contrast)]">
          Meest gekozen
        </span>
      )}
      <span className="font-mono mb-3.5 text-[0.78rem] text-accent">{pkg.id}</span>
      <h3 className="mb-2.5 text-xl font-bold">{pkg.title}</h3>
      <p className="mb-6 text-[0.95rem] text-muted">{pkg.description}</p>
      <div className="font-mono mb-1 text-3xl font-bold">
        {pkg.price}
        <small className="mt-0.5 block text-[0.78rem] font-normal text-muted">{pkg.priceNote}</small>
      </div>
      <ul className="my-6 flex-1 list-none">
        {pkg.features.map((feature) => (
          <li key={feature} className="relative mb-2.5 pl-6 text-[0.93rem] text-muted">
            <span className="font-mono absolute left-0 text-accent" aria-hidden="true">
              →
            </span>
            {feature}
          </li>
        ))}
      </ul>
      <a
        href="#contact"
        onClick={(event) => handleAnchorClick(event, '#contact')}
        className={`rounded-lg px-6 py-3.5 text-center text-[0.98rem] font-semibold ${
          pkg.featured
            ? 'bg-accent text-[var(--color-accent-contrast)] hover:bg-[var(--color-accent-hover)]'
            : 'border border-line text-text hover:border-accent-line'
        }`}
      >
        {pkg.ctaLabel}
      </a>
    </div>
  );
}