export type EasingPreset =
  | 'linear'
  | 'ease'
  | 'ease-in'
  | 'ease-out'
  | 'ease-in-out'
  | 'cubic-bezier'
  | 'steps';

export type AnimationDirection =
  | 'normal'
  | 'reverse'
  | 'alternate'
  | 'alternate-reverse';

export type AnimationFillMode = 'none' | 'forwards' | 'backwards' | 'both';

export type PreviewElement = 'box' | 'circle' | 'text';

export type PresetCategory = 'Entrance' | 'Exit' | 'Attention' | 'Special';

export interface TransformValue {
  translateX: number; // px
  translateY: number; // px
  rotate: number;     // deg
  scaleX: number;     // ratio (1 = no scale)
  scaleY: number;     // ratio
  skewX: number;      // deg
  skewY: number;      // deg
}

export interface KeyframeProperties {
  transform?: TransformValue;
  opacity?: number;          // 0–1
  backgroundColor?: string;  // hex or 'none'
  borderRadius?: number;     // px
  blur?: number;             // px
  brightness?: number;       // ratio (1 = no change)
}

export interface Keyframe {
  id: string;
  offset: number; // 0–100
  properties: KeyframeProperties;
  easing?: string; // per-keyframe easing to next
}

export interface AnimationConfig {
  name: string;
  duration: number;                    // ms
  delay: number;                       // ms
  easing: string;                      // CSS easing string
  iterationCount: number | 'infinite';
  direction: AnimationDirection;
  fillMode: AnimationFillMode;
  keyframes: Keyframe[];
}

export interface AnimationPreset {
  id: string;
  name: string;
  category: PresetCategory;
  config: AnimationConfig;
}