import * as React from "react"

import { Button } from "@/components/ui/button"
import { cn } from "@/lib/utils"

export type QuickActionGridItem = {
  id: string
  label: React.ReactNode
  description?: React.ReactNode
  icon?: React.ReactNode
  disabled?: boolean
  onClick?: () => void
}

export type QuickActionGridProps = React.ComponentProps<"div"> & {
  items: QuickActionGridItem[]
  columns?: 2 | 3 | 4
}

function QuickActionGrid({ items, columns = 3, className, ...props }: QuickActionGridProps) {
  return (
    <div
      data-slot="quick-action-grid"
      data-columns={columns}
      className={cn(
        "grid gap-3",
        columns === 2 && "sm:grid-cols-2",
        columns === 3 && "sm:grid-cols-2 lg:grid-cols-3",
        columns === 4 && "sm:grid-cols-2 lg:grid-cols-4",
        className
      )}
      {...props}
    >
      {items.map((item) => (
        <Button
          key={item.id}
          type="button"
          variant="outline"
          disabled={item.disabled}
          onClick={item.onClick}
          className="h-auto justify-start gap-3 rounded-[var(--aui-card-radius,var(--radius-xl))] p-4 text-left"
        >
          {item.icon && <span className="shrink-0 text-muted-foreground">{item.icon}</span>}
          <span className="min-w-0">
            <span className="block font-medium text-foreground">{item.label}</span>
            {item.description && <span className="mt-1 block text-xs font-normal text-muted-foreground">{item.description}</span>}
          </span>
        </Button>
      ))}
    </div>
  )
}

export { QuickActionGrid }