import React from 'react';
import { mdiCurrencyUsd, mdiCartOutline, mdiFileCheckOutline, mdiPlus } from '@mdi/js';
import BaseIcon from '../../BaseIcon';
import Link from 'next/link';

const QuickActions = () => {
  const actions = [
    {
      title: 'New Sale',
      description: 'Record income',
      icon: mdiCurrencyUsd,
      href: '/sales_invoices/sales_invoices-new',
      bgColor: 'bg-indigo-50',
      iconBg: 'bg-indigo-600',
      borderColor: 'border-indigo-100',
    },
    {
      title: 'New Purchase',
      description: 'Record expense',
      icon: mdiCartOutline,
      href: '/purchase_invoices/purchase_invoices-new',
      bgColor: 'bg-rose-50',
      iconBg: 'bg-rose-600',
      borderColor: 'border-rose-100',
    },
    {
      title: 'Tax Compliance',
      description: 'VAT & WHT Records',
      icon: mdiFileCheckOutline,
      href: '/vat_declarations/vat_declarations-list',
      bgColor: 'bg-emerald-50',
      iconBg: 'bg-emerald-600',
      borderColor: 'border-emerald-100',
    },
  ];

  return (
    <div className="mb-10">
      <div className="flex items-center justify-between mb-4">
        <h2 className="text-xl font-bold text-slate-800 dark:text-white">Quick Actions</h2>
      </div>
      
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        {actions.map((action, index) => (
          <Link key={index} href={action.href}>
            <div className={`cursor-pointer group relative flex flex-col items-center justify-center p-8 rounded-[1.5rem] border ${action.borderColor} ${action.bgColor} dark:bg-dark-900 shadow-sm hover:shadow-lg transition-all active:scale-[0.98]`}>
              <div className={`w-14 h-14 ${action.iconBg} text-white rounded-2xl flex items-center justify-center mb-4 shadow-lg group-hover:scale-110 transition-transform`}>
                <BaseIcon path={action.icon} size={28} />
              </div>
              
              <div className="text-center">
                <h3 className="text-base font-bold text-slate-900 dark:text-white mb-1 group-hover:text-indigo-600 transition-colors">{action.title}</h3>
                <p className="text-slate-500 dark:text-gray-400 text-xs">{action.description}</p>
              </div>
              
              <div className="absolute top-4 right-4 opacity-0 group-hover:opacity-100 transition-opacity">
                <BaseIcon path={mdiPlus} size={20} className="text-slate-400" />
              </div>
            </div>
          </Link>
        ))}
      </div>
    </div>
  );
};

export default QuickActions;
