import { cva, type VariantProps } from 'class-variance-authority';

// ── Severity type ────────────────────────────────────────────────────────────

export type AlertSeverity = 'danger' | 'warning' | 'success' | 'info';

// ── Root ─────────────────────────────────────────────────────────────────────

export const alertRootVariants = cva(
  ['flex-row items-start', 'gap-2 px-3', 'rounded-[var(--border-radius-default)]'],
  {
    variants: {
      severity: {
        danger: 'bg-surface-danger-subtle',
        warning: 'bg-surface-warning-subtle',
        success: 'bg-surface-success-subtle',
        info: 'bg-surface-info-subtle',
      },
    },
    defaultVariants: {
      severity: 'info',
    },
  },
);

// ── Icon ─────────────────────────────────────────────────────────────────────

export const alertIconVariants = cva(['size-5 shrink-0 mt-3'], {
  variants: {
    severity: {
      danger: 'text-content-danger-on-subtle',
      warning: 'text-content-warning-on-subtle',
      success: 'text-content-success-on-subtle',
      info: 'text-content-info-on-subtle',
    },
  },
  defaultVariants: {
    severity: 'info',
  },
});

// ── Body (internal row: text area + trailing actions) ────────────────────────

export const alertBodyVariants = cva(['flex-1 flex-row items-start gap-2 min-w-0']);

// ── Text (internal flex-col for title + description) ─────────────────────────

export const alertTextVariants = cva(['flex-1 flex-col gap-1 min-w-0 mt-3 mb-3']);

// ── Title ────────────────────────────────────────────────────────────────────

export const alertTitleVariants = cva(['body-md font-semibold'], {
  variants: {
    severity: {
      danger: 'text-content-danger-on-subtle',
      warning: 'text-content-warning-on-subtle',
      success: 'text-content-success-on-subtle',
      info: 'text-content-info-on-subtle',
    },
  },
  defaultVariants: {
    severity: 'info',
  },
});

// ── Description ──────────────────────────────────────────────────────────────

export const alertDescriptionVariants = cva(['body-md'], {
  variants: {
    severity: {
      danger: 'text-content-danger-on-subtle',
      warning: 'text-content-warning-on-subtle',
      success: 'text-content-success-on-subtle',
      info: 'text-content-info-on-subtle',
    },
  },
  defaultVariants: {
    severity: 'info',
  },
});

// ── Actions ──────────────────────────────────────────────────────────────────

export const alertActionsVariants = cva(['shrink-0 flex-row items-center gap-1.5 mt-1.5 mb-1.5']);

// ── Types ─────────────────────────────────────────────────────────────────────

export type AlertVariantProps = VariantProps<typeof alertRootVariants>;