import React from 'react';
import { mdiCalendarCheckOutline, mdiCheckDecagram } from '@mdi/js';
import BaseIcon from '../../BaseIcon';

const UpcomingDueDates = () => {
  return (
    <div className="bg-white dark:bg-dark-900 border border-gray-100 dark:border-dark-700 rounded-[1.5rem] p-6 shadow-sm overflow-hidden flex flex-col h-full">
      <div className="flex items-center justify-between mb-8">
        <h2 className="text-xl font-bold text-slate-800 dark:text-white flex items-center">
          <BaseIcon path={mdiCalendarCheckOutline} size={22} className="mr-2 text-indigo-500" />
          Upcoming Due Dates
        </h2>
      </div>
      
      <div className="flex flex-col items-center justify-center flex-grow py-12 px-6 text-center">
        <div className="w-16 h-16 bg-emerald-50 text-emerald-500 rounded-full flex items-center justify-center mb-6 shadow-sm border border-emerald-100">
          <BaseIcon path={mdiCheckDecagram} size={32} />
        </div>
        
        <h3 className="text-lg font-bold text-slate-900 dark:text-white mb-2 tracking-tight">All caught up!</h3>
        <p className="text-slate-500 dark:text-gray-400 text-sm leading-relaxed max-w-[200px] mx-auto">
          No pending invoices or tax filings require your attention today.
        </p>
      </div>
      
      <div className="mt-auto pt-6 border-t border-gray-50 dark:border-dark-700">
        <div className="flex items-center justify-between text-xs text-slate-400 font-medium">
          <span>Last sync: Today, 10:59 AM</span>
          <span className="flex items-center text-emerald-500">
            <span className="w-2 h-2 bg-emerald-500 rounded-full mr-1.5 animate-pulse"></span>
            Syncing Live
          </span>
        </div>
      </div>
    </div>
  );
};

export default UpcomingDueDates;
