'use client';

import React from 'react';

interface ShimmerLinesProps {
  widths: number[];
}

export const ShimmerLines: React.FC<ShimmerLinesProps> = ({ widths }) => {
  return (
    <div className='flex flex-col gap-4'>
      {widths.map((width, index) => (
        <div
          key={index}
          className='relative h-2 overflow-hidden rounded-full after:absolute after:inset-0 after:[animation:shimmer-placeholder_1.5s_infinite] after:bg-gradient-to-r after:from-transparent after:via-white/15 after:to-transparent'
          style={{
            backgroundColor: 'rgba(255, 255, 255, 0.05)',
            width: `${width}px`,
          }}
        >
          <style>{`@keyframes shimmer-placeholder{0%{transform:translateX(-100%);}100%{transform:translateX(100%);}}`}</style>
        </div>
      ))}
    </div>
  );
};

export default ShimmerLines;