import { getUserData } from "../../functions/getUserData";
import { ALPHA_ORG } from "../../pages/Dashboard";
import { DeleteIcon } from "../icons/ContextMenuIcons";

export const TutorialCard: React.FC<{ tutorial: Tutorial }> = ({ tutorial }) => {
    const { organization } = getUserData();
    return (
        <div className="tutorial-card-container">
            <div
                className="preview-container"
                style={{
                    backgroundImage: tutorial.thumbnail
                        ? `url(${tutorial.thumbnail})`
                        : "linear-gradient(135deg, #ddd, #bbb)",
                }}
            ></div>
            <div className="tutorial-details">
                <div className="context">
                    <div className="tutorial-name">{tutorial.name}</div>
                    <div className="updated-date">
                        {new Date(tutorial.updatedAt).toLocaleDateString()}
                    </div>
                </div>
                {organization === ALPHA_ORG && (
                    <div className="delete-option">
                        <DeleteIcon />
                    </div>
                )}
            </div>
        </div>
    );
};
