import Link from 'next/link';
import Icon from './Icon';

export default function ProjectCard({ project }) {
  const { title, description, tags, href, repo, featured, internal } = project;
  const primaryHref = href || repo;

  return (
    <article className={`project-card ${featured ? 'is-featured' : ''}`}>
      <div className="project-top">
        {featured ? (
          <span className="pill pill-accent">
            <span className="live-dot" /> Live
          </span>
        ) : (
          <Icon name="github" size={20} className="project-glyph" />
        )}
        {repo && href && (
          <a href={repo} target="_blank" rel="noopener noreferrer" className="project-repo" aria-label={`${title} source code`}>
            <Icon name="github" size={16} />
          </a>
        )}
      </div>

      <h3 className="project-title">
        {internal ? (
          <Link href={primaryHref} className="project-link">
            {title}
          </Link>
        ) : (
          <a href={primaryHref} target="_blank" rel="noopener noreferrer" className="project-link">
            {title}
          </a>
        )}
        <Icon name="arrowUpRight" size={18} className="project-arrow" />
      </h3>
      <p className="project-description">{description}</p>

      <ul className="tag-list">
        {tags.map((tag) => (
          <li key={tag} className="tag">
            {tag}
          </li>
        ))}
      </ul>
    </article>
  );
}