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

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