import React from "react"
import { Label } from "../../tremor/Text"
import { useCopilot } from "./Copilot"
import { useDashboard } from "../Dashboard/useDashboard"


export const CopilotButton: React.FC<{ styles?: any }> = ({ styles }) => {
    const { setOpen } = useCopilot();
    const { dashboard } = useDashboard();
    return (
        <div
            onClick={() => setOpen(true)}
            className="onvo-fixed onvo-z-20 onvo-bottom-5 onvo-right-5 onvo-h-12 onvo-w-32 onvo-rounded-full onvo-cursor-pointer onvo-bg-blue-500 onvo-border onvo-border-blue-400 onvo-shadow-xl onvo-px-4 onvo-flex onvo-flex-row onvo-gap-3 onvo-items-center"
            style={styles}
        >

            <svg
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                strokeWidth={1.5}
                className="onvo-size-6"
            >
                <defs>
                    <linearGradient
                        id="sparkleGradient"
                        x1="0%"
                        y1="0%"
                        x2="100%"
                        y2="100%"
                    >
                        <stop offset="0%" stopColor="#e9e9e9" />
                        <stop offset="100%" stopColor="#ffffff" />
                    </linearGradient>
                </defs>
                <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    stroke="url(#sparkleGradient)"
                    d="M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09ZM18.259 8.715 18 9.75l-.259-1.035a3.375 3.375 0 0 0-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 0 0 2.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 0 0 2.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 0 0-2.456 2.456ZM16.894 20.567 16.5 21.75l-.394-1.183a2.25 2.25 0 0 0-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 0 0 1.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 0 0 1.423 1.423l1.183.394-1.183.394a2.25 2.25 0 0 0-1.423 1.423Z"
                />
            </svg>
            <Label className="onvo-default-font onvo-cursor-pointer !onvo-text-slate-100 dark:!onvo-text-slate-200 onvo-leading-[1]">
                {dashboard?.settings?.copilot_title || "Copilot"}
            </Label>
            <div className="onvo-shimmer"></div>
        </div>
    )
}