import Link from 'next/link';
import type { CSSProperties } from 'react';
import type { Archetype } from '@/lib/types';

export function Monogram({ archetype, large = false }: { archetype: Archetype; large?: boolean }) {
  return (
    <span
      className={large ? 'monogram monogram-lg' : 'monogram'}
      style={{ '--c': archetype.color } as CSSProperties}
      aria-hidden="true"
    >
      {archetype.monogram}
    </span>
  );
}

export function ArchetypeCard({ archetype }: { archetype: Archetype }) {
  return (
    <Link
      href={`/archetypes/${archetype.id}`}
      className="card arch-card"
      style={{ '--c': archetype.color } as CSSProperties}
    >
      <Monogram archetype={archetype} />
      <h3>{archetype.name}</h3>
      <span className="role">{archetype.role}</span>
      <p>{archetype.tagline}</p>
    </Link>
  );
}