import type { ColorChangeCardItem } from '@/components/ui/color-change-card';
import type { Archetype, ArchetypeId } from '@/lib/types';

// One Unsplash photo per archetype, used for the colour-change cards and each archetype page's backdrop.
const photoIds: Record<ArchetypeId, string> = {
  architect: 'photo-1503387762-592deb58ef4e', // drafting plans
  luminary: 'photo-1475721027785-f74eccf877e2', // stage microphone
  marshal: 'photo-1522071820081-009f0129c71c', // team at work
  broker: 'photo-1521791136064-7986c2920216', // handshake
  navigator: 'photo-1524661135-423995f22d0b', // world map
  builder: 'photo-1504307651254-35680f356dfd', // construction crew
  overseer: 'photo-1551288049-bebda4e38f71', // performance dashboard
  engineer: 'photo-1518770660439-4636190af475', // circuit board
};

export const unsplash = (id: string, width = 800) =>
  `https://images.unsplash.com/${id}?auto=format&fit=crop&w=${width}&q=70`;

export const archetypeImage = (id: ArchetypeId, width?: number) => unsplash(photoIds[id], width);

/** Maps archetypes onto colour-change cards linking to each archetype's page. */
export function archetypeCards(archetypes: Archetype[]): ColorChangeCardItem[] {
  return archetypes.map((a) => ({
    id: a.id,
    heading: a.name,
    eyebrow: a.role,
    description: a.tagline,
    imgSrc: archetypeImage(a.id),
    href: `/archetypes/${a.id}`,
    color: a.color,
  }));
}