// @design-system: domain/TechnicalReviewCard

import { cn } from '@/lib/cn';
import { useLocale } from '@/lib/i18n/react';
import { formatDate } from '@/lib/format';

/** Props for TechnicalReviewCard */
export interface TechnicalReviewCardProps {
  /** Reviewer's display name. */
  reviewerName: string;
  /** Review body text. */
  body: string;
  /** ISO date string. */
  date: string;
  /** Additional class names. */
  className?: string;
}

/**
 * TechnicalReviewCard - review without star rating. Used for technical/bug reviews.
 *
 * @example
 * ```tsx
 * <TechnicalReviewCard reviewerName="Support" body="App crashed on iOS 17" date="2026-04-01" />
 * ```
 */
export function TechnicalReviewCard({
  reviewerName,
  body,
  date,
  className,
}: TechnicalReviewCardProps) {
  const { locale } = useLocale();

  return (
    <article
      className={cn(
        'bg-surface-base flex flex-col gap-2 rounded-xl border border-border-default p-4',
        className,
      )}
    >
      <div className="flex items-start justify-between gap-2">
        <p className="text-text-primary text-sm font-semibold">{reviewerName}</p>
        <time dateTime={date} className="text-text-muted shrink-0 text-xs">
          {formatDate(date, locale)}
        </time>
      </div>
      <p className="text-text-secondary text-sm">{body}</p>
    </article>
  );
}