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

const Avatar03 = () => {
  const sizes = [
    { container: 'h-6 w-6', indicator: 'h-1.5 w-1.5' },
    { container: 'h-8 w-8', indicator: 'h-2 w-2' },
    { container: 'h-10 w-10', indicator: 'h-2.5 w-2.5' },
    { container: 'h-12 w-12', indicator: 'h-3 w-3' },
    { container: 'h-14 w-14', indicator: 'h-3.5 w-3.5' },
    { container: 'h-16 w-16', indicator: 'h-4 w-4' },
  ];

  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} rounded-full`}>
          <Image
            src="/images/user/user-01.jpg"
            alt="user"
            width={parseInt(size.container.split('-')[1]) * 4}
            height={parseInt(size.container.split('-')[1]) * 4}
            className="overflow-hidden rounded-full"
          />
          <span
            className={`absolute bottom-0 right-0 ${size.indicator} rounded-full border-[1.5px] border-white bg-[#f04438] dark:border-gray-900`}
          ></span>
        </div>
      ))}
    </div>
  );
};

export default Avatar03;