'use client';

import {Heading, Text} from '@astryxdesign/core/Text';
import {Badge} from '@astryxdesign/core/Badge';
import {Icon} from '@astryxdesign/core/Icon';
import {ICONS} from '@/shared/utils/icons';
import {BUSINESS_ALERTS} from '../../services/commerceService';

export function BusinessAlerts() {
  return (
    <div className="space-y-3">
      <Heading level={4} className="text-base font-bold text-white">
        Real-Time Business & Operational Alerts
      </Heading>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
        {BUSINESS_ALERTS.map((alert) => {
          const isCritical = alert.severity === 'critical';
          const isWarning = alert.severity === 'warning';
          const isSuccess = alert.severity === 'success';

          const borderClass = isCritical
            ? 'border-rose-500/30 bg-rose-500/[0.03]'
            : isWarning
            ? 'border-amber-500/30 bg-amber-500/[0.03]'
            : isSuccess
            ? 'border-emerald-500/30 bg-emerald-500/[0.03]'
            : 'border-blue-500/30 bg-blue-500/[0.03]';

          return (
            <div
              key={alert.id}
              className={`rounded-xl border p-4 shadow-sm flex flex-col justify-between gap-3 ${borderClass}`}
            >
              <div className="flex items-start justify-between gap-3">
                <div className="flex items-start gap-2.5">
                  <Icon
                    icon={isCritical || isWarning ? ICONS.alert : isSuccess ? ICONS.up : ICONS.info}
                    size="sm"
                    className={
                      isCritical
                        ? 'text-rose-400'
                        : isWarning
                        ? 'text-amber-400'
                        : isSuccess
                        ? 'text-emerald-400'
                        : 'text-blue-400'
                    }
                  />
                  <div>
                    <span className="text-sm font-bold text-white block">{alert.title}</span>
                    <Text size="sm" color="secondary" className="mt-0.5">
                      {alert.description}
                    </Text>
                  </div>
                </div>
                <Badge
                  variant={isCritical ? 'error' : isWarning ? 'warning' : isSuccess ? 'success' : 'info'}
                  label={alert.type.replace('_', ' ').toUpperCase()}
                />
              </div>

              <div className="pt-2 border-t border-white/5 flex justify-end">
                <button
                  type="button"
                  className="text-xs font-bold text-white hover:text-amber-300 transition-colors flex items-center gap-1"
                >
                  {alert.actionText} →
                </button>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}