import { type HTMLAttributes } from 'react';

import { cn } from '@/utils/classNames';

export interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
  readonly rounded?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
}

const roundedClasses = {
  sm: 'rounded-lg',
  md: 'rounded-xl',
  lg: 'rounded-2xl',
  xl: 'rounded-3xl',
  full: 'rounded-full'
} as const;

export function Skeleton({ className, rounded = 'md', ...props }: SkeletonProps) {
  return (
    <div
      aria-hidden="true"
      className={cn('skeleton-shimmer', roundedClasses[rounded], className)}
      {...props}
    />
  );
}

export function SkeletonText({
  className,
  lines = 3
}: {
  readonly className?: string;
  readonly lines?: number;
}) {
  return (
    <div className={cn('space-y-2', className)} aria-hidden="true">
      {Array.from({ length: lines }, (_, index) => (
        <Skeleton
          key={index}
          className={cn('h-3', index === lines - 1 ? 'w-2/3' : 'w-full')}
          rounded="full"
        />
      ))}
    </div>
  );
}