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

interface FeaturedCardProps {
  project: Project;
}

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

  return (
    <Link
      to={`/projects/${project.id}`}
      className="project-card project-card-link"
    >
      <div className="project-card-header">
        <div className="project-icon">{IconComponent && <IconComponent size={22} />}</div>
        <div className="project-card-info">
          <div className="project-name">
            {project.displayName[lang] || project.name}
            {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, 3).map((tech) => (
          <span key={tech} className="badge">
            {tech}
          </span>
        ))}
      </div>

      <div className="project-card-meta">
        <span className="badge badge-accent">
          <Star size={12} /> {project.stars}
        </span>
        <span className="badge">{project.latestVersion}</span>
      </div>
    </Link>
  );
}
