import React from 'react';
import clsx from 'clsx';

export interface SkeletonProps {
  className?: string;
  variant?: 'text' | 'rect' | 'circle';
  width?: string;
  height?: string;
}

export function Skeleton({ className, variant = 'rect', width, height }: SkeletonProps) {
  const variantClass = {
    text: 'rounded',
    rect: 'rounded-md',
    circle: 'rounded-full',
  };

  return (
    <div
      className={clsx(
        'animate-pulse motion-reduce:animate-none bg-secondary-200',
        variantClass[variant],
        className
      )}
      style={{ width, height }}
      role="status"
      aria-label="Wird geladen"
    />
  );
}

export function SkeletonText({ lines = 3, className }: { lines?: number; className?: string }) {
  return (
    <div className={clsx('space-y-2', className)} role="status" aria-label="Wird geladen">
      {Array.from({ length: lines }).map((_, i) => (
        <Skeleton
          key={i}
          variant="text"
          className={clsx('h-4', i === lines - 1 && 'w-2/3')}
        />
      ))}
    </div>
  );
}