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

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

export const cardRootVariants = cva(
  [
    'bg-surface-primary',
    'border border-stroke-secondary',
    'rounded-[var(--border-radius-default)]',
    'overflow-hidden',
  ],
  {
    variants: {
      fullBleed: {
        true: '',
        false: '',
      },
    },
  },
);

// ── Stripe ──────────────────────────────────────────────────

export const cardStripeVariants = cva(['bg-brand-400', 'h-2', 'w-full']);

// ── Header ──────────────────────────────────────────────────

export const cardHeaderVariants = cva([
  'border-b border-solid border-b-stroke-secondary',
  'flex-row items-center justify-between gap-0.5',
  'px-5 py-3',
]);

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

export const cardTitleVariants = cva(['flex-1']);

// ── Content ─────────────────────────────────────────────────

export const cardContentVariants = cva(['text-content-primary', 'p-5'], {
  variants: {
    fullBleed: {
      true: 'p-0',
    },
  },
});

// ── Footer ──────────────────────────────────────────────────

export const cardFooterVariants = cva(['flex-col items-stretch gap-2'], {
  variants: {
    fullBleed: {
      true: 'p-5',
      false: 'px-5 pb-5 pt-0',
    },
  },
  defaultVariants: {
    fullBleed: false,
  },
});

export type CardVariantProps = VariantProps<typeof cardRootVariants>;
export type CardContentVariantProps = VariantProps<typeof cardContentVariants>;
export type CardFooterVariantProps = VariantProps<typeof cardFooterVariants>;