import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/react/24/outline";
import { Icon } from "../../tremor/Icon";
import { useDashboard } from "../../layouts/Dashboard/useDashboard";
import React from "react";
import { Label, Text } from "../../tremor/Text";

export const AutomationHeader: React.FC<{ onClose: () => void }> = ({ onClose }) => {
    const { dashboard } = useDashboard();

    return (<div
        className={
            "onvo-foreground-color onvo-relative onvo-w-full onvo-left-0 onvo-top-0 onvo-z-10 onvo-flex onvo-flex-row onvo-justify-start onvo-items-center onvo-gap-4 onvo-border-solid onvo-border-b onvo-border-black/10 onvo-p-2 dark:onvo-border-white/10"
        }
    >
        <Icon
            icon={ChevronLeftIcon}
            variant="shadow"
            className="onvo-ml-2 onvo-background-color onvo-border-solid onvo-border onvo-border-black/10 dark:onvo-border-white/10"
            onClick={onClose}
        />

        <div className="onvo-flex onvo-flex-row onvo-w-full onvo-gap-1 onvo-flex-grow onvo-justify-start onvo-items-center">
            <Text className="onvo-hidden @xl/widgetmodal:onvo-block">
                {dashboard?.title}
            </Text>
            <ChevronRightIcon className="onvo-hidden @xl/widgetmodal:onvo-block onvo-h-4 onvo-w-4 dark:onvo-fill-slate-500" />
            <Label>
                Schedule report
            </Label>
            <div className="onvo-flex-grow onvo-h-2" />
        </div>
    </div>)
}