import React from 'react';

import { useTranslations } from 'next-intl';

import { buildImageMetaText } from '@/utils/images';

import { CreationGalleryImage } from '@/types/Creation';

interface ImageMetaProps {
  image: CreationGalleryImage | null;
  videoForrasa?: string | null;
}

const ImageMeta: React.FC<ImageMetaProps> = ({ image, videoForrasa }) => {
  const t = useTranslations('imageMeta');

  // If it's a video with source
  if (videoForrasa && !image) {
    return (
      <div className="text-sm text-mma-blue py-2 px-4 sm:px-0">
        <span className="font-semibold">{t('videoSource')}:</span> {videoForrasa}
      </div>
    );
  }

  if (!image) return null;

  const text = buildImageMetaText(image, true, {
    source: t('source'),
    photo: t('photo'),
    rightsHolder: t('rightsHolder'),
  });
  if (!text) return null;

  // bold parts
  const parts = text.split(', ');
  const rendered = parts.map((part, idx) => {
    const match = part.match(
      new RegExp(`^(${t('source')}|${t('photo')}|${t('rightsHolder')}):\\s*(.*)$`)
    );
    if (match) {
      return (
        <span key={idx} className="inline">
          <span className="font-semibold">{match[1]}:</span> {match[2]}
          {idx < parts.length - 1 ? <span>, </span> : null}
        </span>
      );
    }
    return (
      <span key={idx} className="inline">
        {part}
        {idx < parts.length - 1 ? <span>, </span> : null}
      </span>
    );
  });

  return <div className="text-sm text-mma-blue py-2 px-4 sm:px-0">{rendered}</div>;
};

export default ImageMeta;