import type { ComponentChildren } from "preact";

export const Project = ({
    title,
    imgPath,
    children,
    websiteHref,
    sourceHref,
}: {
    title: string;
    imgPath: string;
    children: ComponentChildren;
    websiteHref?: string;
    sourceHref?: string;
}) => {
    return (
        <div className="flex flex-col justify-between">
            <div>
                <img
                    src={imgPath}
                    alt={`${title} Logo`}
                    title={title}
                    loading="lazy"
                    className="mx-auto h-20"
                />
                <h3 className="font-display text-3xl text-center">{title}</h3>
                {children}
            </div>
            <div>
                {websiteHref && (
                    <a
                        href={websiteHref}
                        target="_blank"
                        rel="noopener"
                        className="btn btn-primary font-display"
                    >
                        <i class="icon-new_tab" /> Website
                    </a>
                )}
                {sourceHref && (
                    <a
                        href={sourceHref}
                        target="_blank"
                        rel="noopener"
                        className="btn btn-accent font-display"
                    >
                        <i class="icon-new_tab" /> Source
                    </a>
                )}
            </div>
        </div>
    );
};