// components/partials/avatar/Avatar01.tsx
import React from 'react';
import Image from 'next/image';

const Avatar01 = () => {
  const sizes = [
    { container: 'h-6 w-6', max: 'max-w-6' },
    { container: 'h-8 w-8', max: 'max-w-8' },
    { container: 'h-10 w-10', max: 'max-w-10' },
    { container: 'h-12 w-12', max: 'max-w-12' },
    { container: 'h-14 w-14', max: 'max-w-14' },
    { container: 'h-16 w-16', max: 'max-w-16' },
  ];

  return (
    <div className="flex flex-col items-center justify-center gap-5 sm:flex-row">
      {sizes.map((size, index) => (
        <div key={index} className={`relative ${size.container} ${size.max} rounded-full`}>
          <Image
            src="/images/user/user-01.jpg"
            alt="user"
            width={parseInt(size.container.split('-')[1]) * 4} // Convert to pixels
            height={parseInt(size.container.split('-')[1]) * 4}
            className="overflow-hidden rounded-full"
          />
        </div>
      ))}
    </div>
  );
};

export default Avatar01;