import type { Variants } from 'framer-motion';

export const DocumentDropzoneContainerVariants: Variants = {
  initial: {
    scale: 1,
  },
  animate: {
    scale: 1,
  },
  hover: {
    transition: {
      staggerChildren: 0.05,
    },
  },
};

export const DocumentDropzoneCardLeftVariants: Variants = {
  initial: {
    x: 40,
    y: -10,
    rotate: -14,
  },
  animate: {
    x: 40,
    y: -10,
    rotate: -14,
  },
  hover: {
    x: -25,
    y: -25,
    rotate: -22,
  },
};

export const DocumentDropzoneCardRightVariants: Variants = {
  initial: {
    x: -40,
    y: -10,
    rotate: 14,
  },
  animate: {
    x: -40,
    y: -10,
    rotate: 14,
  },
  hover: {
    x: 25,
    y: -25,
    rotate: 22,
  },
};

export const DocumentDropzoneCardCenterVariants: Variants = {
  initial: {
    x: 0,
    y: 0,
  },
  animate: {
    x: 0,
    y: 0,
  },
  hover: {
    x: 0,
    y: -25,
  },
};

export const DocumentDropzoneDisabledCardLeftVariants: Variants = {
  initial: {
    x: 40,
    y: 30,
    rotate: -14,
  },
  animate: {
    x: 40,
    y: 0,
    rotate: -14,
  },
  hover: {
    x: 30,
    y: 0,
    transition: { type: 'spring', duration: 0.25, bounce: 0.5 },
  },
};

export const DocumentDropzoneDisabledCardRightVariants: Variants = {
  initial: {
    x: -40,
    y: 30,
    rotate: 14,
  },
  animate: {
    x: -50,
    y: 5,
    rotate: 14,
  },
  hover: {
    x: -40,
    y: 5,
    transition: { type: 'spring', duration: 0.25, bounce: 0.5 },
  },
};

export const DocumentDropzoneDisabledCardCenterVariants: Variants = {
  initial: {
    x: 20,
    y: 0,
  },
  animate: {
    x: -10,
    y: 0,
  },
  hover: {
    x: -20,
    y: 0,
    rotate: -5,
  },
};