import { ArrowUpRight } from "lucide-react"

interface ProjectCardProps {
    readonly index: string
    readonly title: string
    readonly category: string
    readonly description: string
    readonly tags: ReadonlyArray<string>
    readonly href?: string
    readonly linkLabel?: string
    readonly variant?: "light" | "dark" | "outline"
}

export function ProjectCard({
    index,
    title,
    category,
    description,
    tags,
    href,
    linkLabel = "View project",
    variant = "light",
}: ProjectCardProps) {
    return (
        <article className={`project-card project-card--${variant}`}>
            <div className="project-card__topline">
                <span>{index}</span>
                <span>{category}</span>
            </div>

            <div className="project-card__body">
                <h3>{title}</h3>
                <p>{description}</p>
            </div>

            <div className="project-card__footer">
                <ul className="tag-list" aria-label={`${title} technologies and themes`}>
                    {tags.map(tag => <li key={tag}>{tag}</li>)}
                </ul>

                {href
                    ? (
                        <a className="project-card__link" href={href} target="_blank" rel="noreferrer">
                            {linkLabel}
                            <ArrowUpRight aria-hidden="true" />
                        </a>
                    )
                    : <span className="project-card__status">In development <span aria-hidden="true">●</span></span>}
            </div>
        </article>
    )
}
