import { CheckCircleIcon, XCircleIcon } from '@phosphor-icons/react';
import dayjs from 'dayjs';
import { useTranslation } from 'react-i18next';
import type { Resolution } from './types';

export default function ResolutionBanner({
  resolution,
}: {
  resolution: Resolution;
}) {
  const { t } = useTranslation();
  const isApproved = resolution.action === 'approved';

  return (
    <div
      className={`flex items-start gap-4 rounded-2xl border p-5 ${
        isApproved
          ? 'border-success/20 bg-success/5'
          : 'border-destructive/20 bg-destructive/5'
      }`}
    >
      {isApproved ? (
        <CheckCircleIcon
          weight="fill"
          className="mt-0.5 size-6 shrink-0 text-success"
        />
      ) : (
        <XCircleIcon
          weight="fill"
          className="mt-0.5 size-6 shrink-0 text-destructive"
        />
      )}
      <div>
        <p
          className={`font-semibold capitalize ${isApproved ? 'text-success' : 'text-destructive'}`}
        >
          {isApproved ? t('Deposit Approved') : t('Deposit Rejected')}
        </p>
        <p className="mt-0.5 text-sm text-black/50">
          {isApproved ? t('Approved') : t('Rejected')} {t('by')}{' '}
          <span className="font-medium text-black/70">{resolution.by}</span>{' '}
          {t('on')}{' '}
          <span className="font-medium text-black/70">
            {dayjs(resolution.at).format('MMM D, YYYY [at] h:mm A')}
          </span>
        </p>
      </div>
    </div>
  );
}