ProjectCard.jsx

import { Link } from 'react-router-dom';
import { useTranslation } from 'react-i18next';

export default function ProjectCard({ project }) {
  const { t, i18n } = useTranslation();
  const lang = (i18n.resolvedLanguage || 'es').slice(0, 2);
  const fallback = (obj) => (obj?.[lang] ?? obj?.es ?? '');

  if (project.comingSoon) {
    return (
      <div className="card card--coming">
        <div className="card__media">
          <div className="placeholder placeholder--soft">{t('projects.comingSoon')}</div>
        </div>
        <div className="card__body">
          <div className="card__tag">{t('projects.comingSoon')}</div>
          <h3 className="card__title">{fallback(project.title)}</h3>
          <p className="card__excerpt">{fallback(project.summary)}</p>
        </div>
      </div>
    );
  }

  return (
    <Link to={`/proyectos/${project.slug}`} className="card">
      <div className="card__media">
        {project.cover ? (
          <img src={project.cover} alt={fallback(project.title)} />
        ) : (
          <div className="placeholder">{fallback(project.title)}</div>
        )}
      </div>
      <div className="card__body">
        <div className="card__tag">{t(`projects.tags.${project.type}`)}</div>
        <h3 className="card__title">{fallback(project.title)}</h3>
        <p className="card__excerpt">{fallback(project.summary)}</p>
      </div>
    </Link>
  );
}