import { Component, For, Show } from 'solid-js';
import type { Character } from '../../../../server/types/project';

export interface CharacterCardProps {
  character: Character;
  onSelect?: (character: Character) => void;
  compact?: boolean;
}

const roleColors: Record<string, string> = {
  protagonist: '#4CAF50',
  antagonist: '#F44336',
  supporting: '#2196F3',
  background: '#9E9E9E',
  ensemble: '#9C27B0',
};

export const CharacterCard: Component<CharacterCardProps> = (props) => {
  const handleClick = () => {
    props.onSelect?.(props.character);
  };

  return (
    <div
      class="character-card"
      classList={{ 'character-card--compact': props.compact }}
      onClick={handleClick}
      role="button"
      tabindex={0}
    >
      <div class="character-card__header">
        <Show when={props.character.imageUrl}>
          <img
            src={props.character.imageUrl}
            alt={props.character.name}
            class="character-card__avatar"
          />
        </Show>
        <Show when={!props.character.imageUrl}>
          <div class="character-card__avatar character-card__avatar--placeholder">
            {props.character.name.charAt(0).toUpperCase()}
          </div>
        </Show>
        <div class="character-card__info">
          <h3 class="character-card__name">{props.character.name}</h3>
          <span
            class="character-card__role"
            style={{ 'background-color': roleColors[props.character.role || 'supporting'] || '#9E9E9E' }}
          >
            {props.character.role}
          </span>
        </div>
      </div>
      <Show when={!props.compact && props.character.bio}>
        <p class="character-card__bio">{props.character.bio}</p>
      </Show>
      <Show when={!props.compact && props.character.traits}>
        <div class="character-card__traits">
          <strong>Traits:</strong> {props.character.traits}
        </div>
      </Show>
    </div>
  );
};
