// src/components/ui/Skeleton.tsx
// Input: width, height, rounded, className
// Output: shimmer skeleton block for loading states
// Rationale: uses .shimmer CSS animation from globals.css

import { cn } from '@/lib/utils'

export interface SkeletonProps {
  width?: string | number
  height?: string | number
  rounded?: 'sm' | 'md' | 'lg' | 'full'
  className?: string
}

const roundedClasses = {
  sm: 'rounded-sm',
  md: 'rounded-md',
  lg: 'rounded-lg',
  full: 'rounded-full',
}

export function Skeleton({ width, height, rounded = 'md', className }: SkeletonProps) {
  return (
    <div
      className={cn(
        'shimmer bg-bg-elevated',
        roundedClasses[rounded],
        className
      )}
      style={{
        width: width !== undefined ? (typeof width === 'number' ? `${width}px` : width) : '100%',
        height: height !== undefined ? (typeof height === 'number' ? `${height}px` : height) : '16px',
      }}
    />
  )
}