'use client';

import { ComponentType } from 'react';

export interface QuickLogAction {
  type: string;
  label: string;
  icon: ComponentType<any>;
  color: string;
}

export interface QuickLogButtonsProps {
  actions: QuickLogAction[];
  onAction: (type: string) => void;
}

export function QuickLogButtons({ actions, onAction }: QuickLogButtonsProps) {
  return (
    <div className="flex flex-wrap gap-2">
      {actions.map(({ type, label, icon: Icon, color }) => (
        <button
          key={type}
          onClick={() => onAction(type)}
          className={`flex items-center gap-2 px-4 py-2 text-sm font-medium text-white rounded-md transition-colors ${color}`}
        >
          <Icon className="w-4 h-4" />
          {label}
        </button>
      ))}
    </div>
  );
}