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

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

export const avatarRootVariants = cva(
  [
    'rounded-[var(--border-radius-round)]',
    'relative items-center justify-center',
    'bg-surface-tertiary',
  ],
  {
    variants: {
      size: {
        '2xs': 'w-3 h-3',
        xs: 'w-[18px] h-[18px]',
        sm: 'w-6 h-6',
        md: 'w-8 h-8',
        lg: 'w-10 h-10',
        xl: 'w-12 h-12',
        '2xl': 'w-14 h-14',
      },
    },
    defaultVariants: {
      size: 'md',
    },
  },
);

// ── Image ────────────────────────────────────────────────

export const avatarImageVariants = cva([
  'absolute top-0 left-0 w-full h-full',
  'rounded-[var(--border-radius-round)]',
  'overflow-hidden',
  'border border-stroke-secondary',
]);

// ── Text ─────────────────────────────────────────────────

export const avatarTextVariants = cva(['text-content-primary', 'font-medium'], {
  variants: {
    size: {
      '2xs': 'text-[6px]',
      xs: 'text-[9px]',
      sm: 'text-xs',
      md: 'text-base',
      lg: 'text-xl',
      xl: 'text-2xl',
      '2xl': 'text-[28px]',
    },
  },
  defaultVariants: {
    size: 'md',
  },
});

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

export const avatarIconVariants = cva(['text-content-primary'], {
  variants: {
    size: {
      '2xs': 'size-1.5',
      xs: 'size-[9px]',
      sm: 'size-3',
      md: 'size-4',
      lg: 'size-5',
      xl: 'size-6',
      '2xl': 'size-7',
    },
  },
  defaultVariants: {
    size: 'md',
  },
});

// ── Badge ────────────────────────────────────────────────

export const avatarBadgeVariants = cva(
  ['absolute border-white', 'rounded-[var(--border-radius-round)]', 'bottom-0 right-0'],
  {
    variants: {
      size: {
        '2xs': 'w-1.5 h-1.5 border translate-x-[21%] translate-y-[21%]',
        xs: 'w-2 h-2 border translate-x-[17%] translate-y-[17%]',
        sm: 'w-2.5 h-2.5 border-2 translate-x-[15%] translate-y-[15%]',
        md: 'w-3 h-3 border-2 translate-x-[11%] translate-y-[11%]',
        lg: 'w-3.5 h-3.5 border-2 translate-x-[8%] translate-y-[8%]',
        xl: 'w-4 h-4 border-2 translate-x-[6%] translate-y-[6%]',
        '2xl': 'w-5 h-5 border-2 translate-x-[9%] translate-y-[9%]',
      },
    },
    defaultVariants: {
      size: 'md',
    },
  },
);

export type AvatarVariantProps = VariantProps<typeof avatarRootVariants>;