import { Icon } from '@/components/foundation/Icon';
import { classNames } from '@/lib/components/classNames';
import type { HTMLAttributes } from 'react';
import styles from './Loading.module.css';

export function Spinner({ label, className }: { label: string; className?: string }) {
  return (
    <span className={classNames(styles.spinnerGroup, className)} role="status">
      <Icon name="spinner" className={styles.spinner} />
      <span className="visually-hidden">{label}</span>
    </span>
  );
}

interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
  lines?: number;
  label?: string;
}

export function Skeleton({
  lines = 3,
  label = 'Loading content',
  className,
  ...props
}: SkeletonProps) {
  return (
    <div
      className={classNames(styles.skeleton, className)}
      aria-label={label}
      aria-busy="true"
      {...props}
    >
      {Array.from({ length: lines }, (_, index) => (
        <span key={index} />
      ))}
    </div>
  );
}
