import { motion, Variants } from "framer-motion";
import "../styles/components/cards.css";
import { Link } from "react-router-dom";

export type DetailSection =
    | { type: 'text'; title?: string; content: string }
    | { type: 'code'; title?: string; language?: string; code: string }
    | { type: 'image'; src: string; alt?: string; caption?: string; title?: string };

export interface Project {
    id: number;
    title: string;
    description: string;
    techStack: string[];
    image: string;
    links: {
        demo?: string;
        repo?: string;
    };
    hasDetails?: boolean;
    sections?: DetailSection[];
}

interface ProjectCardProps {
    project: Project;
    variants: Variants;
}

export default function ProjectCard({ project, variants }: ProjectCardProps) {
    return (
        <motion.div
            className="project-card"
            variants={variants}
            whileHover={{ y: -10, transition: { duration: 0.2 } }}
        >
            <div className="project-image-container">
                <img
                    src={project.image}
                    alt={project.title}
                    className="project-image"
                />
            </div>
            <div className="project-header">
                <h2 className="project-name">{project.title}</h2>
            </div>

            <div className="project-tech-stack">
                {project.techStack.map(tech => (
                    <span key={tech} className="tech-chip">{tech}</span>
                ))}
            </div>

            <p className="project-description">
                {project.description}
            </p>

            <div className="project-links">
                {project.links.demo && (
                    <a href={project.links.demo} className="project-link" target="_blank" rel="noopener noreferrer">
                        Live Demo <span>→</span>
                    </a>
                )}
                {project.links.repo && (
                    <a href={project.links.repo} className="project-link" target="_blank" rel="noopener noreferrer">
                        GitHub <span>↗</span>
                    </a>
                )}
                {project.hasDetails && (
                    <Link to={`/sidequest/${project.id}`} className="project-link" style={{ background: "rgba(255, 255, 255, 0.15)", border: "1px solid rgba(255, 255, 255, 0.3)" }}>
                        Read More <span>→</span>
                    </Link>
                )}
            </div>
        </motion.div>
    );
}
