'use client';

import { useState } from 'react';
import { ActionCard } from '@/components/ui';
import { CreateTaskForm } from '@/components/forms/CreateTaskForm';
import { CreateTaskData } from '@/clients/tasks-client';
import { Plus, LayoutGrid, Calendar, Settings } from 'lucide-react';

interface QuickActionsProps {
  onCreateTask: (data: CreateTaskData) => Promise<void>;
}

export function QuickActions({ onCreateTask }: QuickActionsProps) {
  const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);

  const handleCreateTask = async (data: CreateTaskData) => {
    await onCreateTask(data);
    setIsCreateModalOpen(false);
  };

  return (
    <>
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
        <ActionCard
          title="Nouvelle Tâche"
          description="Créer une nouvelle tâche"
          icon={<Plus className="w-6 h-6" />}
          onClick={() => setIsCreateModalOpen(true)}
          variant="primary"
        />

        <ActionCard
          title="Kanban Board"
          description="Gérer les tâches"
          icon={<LayoutGrid className="w-6 h-6" />}
          href="/kanban"
          variant="secondary"
        />

        <ActionCard
          title="Daily"
          description="Checkboxes quotidiennes"
          icon={<Calendar className="w-6 h-6" />}
          href="/daily"
          variant="secondary"
        />

        <ActionCard
          title="Paramètres"
          description="Configuration"
          icon={<Settings className="w-6 h-6" />}
          href="/settings"
          variant="secondary"
        />
      </div>

      <CreateTaskForm
        isOpen={isCreateModalOpen}
        onClose={() => setIsCreateModalOpen(false)}
        onSubmit={handleCreateTask}
        loading={false}
      />
    </>
  );
}