import { Link } from 'react-router-dom';
import { ExternalLink, Download, BookOpen, Globe } from 'lucide-react';
import { useI18n } from '../hooks/useI18n';
import { siteData } from '../data/siteData';
import { getIcon } from '../utils/iconRegistry';
import type { Project } from '../types';

interface ProjectCardProps {
  project: Project;
}

export default function ProjectCard({ project }: ProjectCardProps) {
  const { t, bi, lang } = useI18n();
  const status = siteData.statuses[project.status];
  const IconComponent = getIcon(project.icon);

  return (
    <div className="project-card">
      <div className="project-card-header">
        <div className="project-icon">
          {project.logo
            ? <img src={project.logo} alt={project.name} className="project-logo" />
            : (IconComponent && <IconComponent size={22} />)
          }
        </div>
        <div className="project-card-info">
          <div className="project-name">
            <Link to={`/projects/${project.id}`}>{project.displayName[lang] || project.name}</Link>
            {status && (
              <span className="badge badge-status" style={{ '--status-color': status.color } as React.CSSProperties}>
                {bi(status.label)}
              </span>
            )}
          </div>
          <div className="project-slogan">{bi(project.slogan)}</div>
        </div>
      </div>

      <div className="project-card-meta">
        {project.techStack.slice(0, 4).map((tech) => (
          <span key={tech} className="badge">
            {tech}
          </span>
        ))}
        {project.platforms.slice(0, 3).map((platform) => (
          <span key={platform} className="badge">
            {siteData.platforms[platform] || platform}
          </span>
        ))}
      </div>

      <div className="project-card-actions">
        <a href={project.repoUrl} target="_blank" rel="noopener noreferrer" className="btn btn-sm">
          <ExternalLink size={14} /> GitHub
        </a>
        {project.downloads.length > 0 && (
          <Link to={`/projects/${project.id}`} className="btn btn-sm">
            <Download size={14} /> {t('common.download')}
          </Link>
        )}
        {project.websiteUrl && (
          <a
            href={project.websiteUrl}
            target="_blank"
            rel="noopener noreferrer"
            className="btn btn-sm"
          >
            <Globe size={14} /> {t('detail.website')}
          </a>
        )}
        {project.docsUrl && (
          <a
            href={project.docsUrl}
            target="_blank"
            rel="noopener noreferrer"
            className="btn btn-sm"
          >
            <BookOpen size={14} /> {t('common.docs')}
          </a>
        )}
      </div>
    </div>
  );
}