"use client"

import { Button } from "@/components/ui/button"
import { cn } from "@/lib/utils"
import { Play, Type, Edit3, Download } from "lucide-react"

const EditorControls = ({ className = '', onEditClick = () => {}, isEditActive = false }) => {
  return (
    <div className={cn("flex items-center justify-center gap-2", className)}>
      <Button
        variant="ghost"
        size="icon"
        className="w-12 h-12 rounded-full shadow-sm border "
      >
        <Play className="h-8 w-8 " />
          </Button>

          <Button
        variant="ghost"
        size="icon"
        className="w-12 h-12 rounded-full shadow-sm border "
      >
         <span className="text-sm font-medium ">9:16</span>
      </Button>


      <Button
        variant="ghost"
        size="icon"
        className="w-12 h-12 rounded-full shadow-sm border "
      >
        <Type className="h-8 w-8 " />
      </Button>

      <Button
        id="edit"
        variant={isEditActive ? "default" : "ghost"}
        size="icon"
        className="w-12 h-12 rounded-full shadow-sm border"
        onClick={onEditClick}
      >
        <Edit3 className={`h-8 w-8 ${isEditActive ? "text-white" : ""}`} />
      </Button>

      <Button
        variant="ghost"
        size="icon"
        className="w-12 h-12 rounded-full shadow-sm border "
      >
        <Download className="h-8 w-8 " />
      </Button>
    </div>
  )
}


export default EditorControls;