import React from 'react';
import { useTranslation } from 'react-i18next';
import { P2vLicense } from '../utils/p2vApi';

/**
 * 스타일 템플릿의 배포 등급 표시.
 *
 * 왜 카드마다 붙이나 — 퍼블릭 도메인 명화와 영화 포스터가 한 그리드에 섞여 있어
 * 페이지 배너로는 **어느 결과물이 공개 가능한지** 구분되지 않는다. 경고 문구는
 * 실제로 고른 순간에만 띄운다(항상 떠 있으면 아무도 안 읽는다).
 */

const CLASS: Record<P2vLicense, string> = {
  'public-domain': 'ok',
  'internal-only': 'warn',
  // 내부 전용과 색을 나눈다 — 해제 조건도, 책임 주체도 다르다
  'user-uploaded': 'unknown',
};

export const LicenseBadge: React.FC<{ license: P2vLicense }> = ({ license }) => {
  const { t } = useTranslation();
  const variant = CLASS[license] ?? CLASS['internal-only'];
  return (
    <span className={`p2v-license p2v-license--${variant}`}>
      {t(`poster.styling.license.${license}`)}
    </span>
  );
};

/** 내부 전용 템플릿을 고른 순간의 경고 */
export const InternalOnlyWarning: React.FC<{ note?: string }> = ({ note }) => {
  const { t } = useTranslation();
  return (
    <div className="p2v-notice p2v-notice--warn">
      <b>{t('poster.styling.internalOnlyTitle')}</b>
      {' — '}
      {note || t('poster.styling.internalOnlyBody')}
    </div>
  );
};

/** 사용자가 올린 레퍼런스 고지 — 남의 저작물일 수 있다 */
export const UserReferenceNotice: React.FC = () => {
  const { t } = useTranslation();
  return <div className="p2v-notice p2v-notice--unknown">{t('poster.styling.userRefNotice')}</div>;
};