/**
 * Carte cliquable pour un sujet dans la grille /sujets.
 *
 * Rendu : consigne tronquée sur 3 lignes (line-clamp-3) + badge rôle si présent.
 * Règle H : purement présentationnel — l'action vient du parent.
 * Règle L : tokens Direction H via la primitive Card (variant interactive).
 */

import { Badge } from '@/shared/ui/Badge'
import { Card } from '@/shared/ui/Card'
import type { SujetData } from '@/entities/production/types'

interface Props {
  sujet: SujetData
  onSelect: (sujet: SujetData) => void
}

export function SujetCard({ sujet, onSelect }: Props) {
  return (
    <Card variant="interactive" onClick={() => onSelect(sujet)}>
      <div className="flex h-full flex-col gap-3 p-4 text-left">
        {sujet.role && (
          <div>
            <Badge variant="neutral">{sujet.role}</Badge>
          </div>
        )}
        <p className="line-clamp-3 text-sm leading-relaxed text-ink-primary">{sujet.consigne}</p>
      </div>
    </Card>
  )
}