import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuTrigger,
} from "@/Components/ui/dropdown-menu"
import { isFunction } from "@/utils/format"

export const DropdownAction = (props) => {
  const { actionMenu, item, align = "left", isTable = true, btnClassName = null, Tag } = props

  const alignMap = {
    "left": "start",
    "right": "end",
    "center": "center",
  }

  const currentAlign = alignMap?.[align] ?? align

  return (
    <Tag scope="row" className={`text-start ${isTable ? 'w-10' : ''}`}>
      <DropdownMenu >
        <DropdownMenuTrigger className={btnClassName ?? "m-1 btn btn-ghost btn-sm"}><i className="fas fa-ellipsis-vertical"></i></DropdownMenuTrigger>
        <DropdownMenuContent align={currentAlign}>
          <ul className="space-y-1 [&>*:hover]:bg-neutral/10 [&>*]:grid [&>*]:py-1 [&>*]:px-2 [&>*]:rounded-md">
            {isFunction(actionMenu) && actionMenu(item)}
          </ul>
        </DropdownMenuContent>
      </DropdownMenu>
    </Tag>
  )
}

export default DropdownAction
