import { Button } from "@/components/ui/button";
import { Pencil, LineChart, RotateCcw } from "lucide-react";

interface ChartToolbarProps {
    activeTool: string;
    onSelectTool: (tool: string) => void;
    onClear: () => void;
}

export default function ChartToolbar({
    activeTool,
    onSelectTool,
    onClear,
}: ChartToolbarProps) {
    return (
        <div className="flex items-center gap-2 bg-gray-800 p-1.5 rounded-lg border border-gray-700 mb-2">
            <span className="text-xs text-gray-400 px-2 font-medium">
                Drawing Tools:
            </span>

            <Button
                variant={activeTool === "none" ? "secondary" : "ghost"}
                size="sm"
                className="h-7 text-xs text-white"
                onClick={() => onSelectTool("none")}
            >
                Kursor
            </Button>

            <Button
                variant={activeTool === "trendline" ? "default" : "ghost"}
                size="sm"
                className="h-7 text-xs text-white gap-1"
                onClick={() => onSelectTool("trendline")}
            >
                <LineChart className="size-3.5" />
                Trendline
            </Button>

            <Button
                variant={activeTool === "fibonacci" ? "default" : "ghost"}
                size="sm"
                className="h-7 text-xs text-white gap-1"
                onClick={() => onSelectTool("fibonacci")}
            >
                <Pencil className="size-3.5" />
                Fibonacci
            </Button>

            <div className="h-4 w-[1px] bg-gray-700 mx-1" />

            <Button
                variant="ghost"
                size="sm"
                className="h-7 text-xs text-destructive-400 hover:text-destructive-300 hover:bg-destructive-950/30 gap-1"
                onClick={onClear}
            >
                <RotateCcw className="size-3.5" />
                Reset
            </Button>
        </div>
    );
}