import { For, type JSX } from "solid-js";
import { A } from "@solidjs/router";
import { cn } from "~/lib/utils";

interface QuickAction {
  label: string;
  href: string;
  icon: () => JSX.Element;
}

interface QuickActionsProps {
  actions: QuickAction[];
  class?: string;
}

export default function QuickActions(props: QuickActionsProps) {
  return (
    <div class={cn("gradient-card border border-[var(--color-border)]/50 rounded-xl", props.class)}>
      <div class="px-5 py-4 border-b border-[var(--color-border)]/50">
        <h3 class="text-sm font-semibold text-[var(--color-text-primary)]">Quick Actions</h3>
      </div>
      <div class="p-5 grid grid-cols-2 gap-3">
        <For each={props.actions}>
          {(action) => {
            const Icon = action.icon;
            return (
              <A
                href={action.href}
                class="flex flex-col items-center gap-2 p-3 rounded-xl bg-[var(--color-bg-secondary)] hover:bg-[var(--color-brand-primary)]/10 text-[var(--color-text-secondary)] hover:text-[var(--color-brand-primary)] transition-colors text-center"
              >
                <Icon />
                <span class="text-xs font-medium">{action.label}</span>
              </A>
            );
          }}
        </For>
      </div>
    </div>
  );
}
