import React from 'react';

type OwnerStatsBarProps = {
  followers: number;
  following: number;
  dogsOwned: number;
};

export function OwnerStatsBar({ followers, following, dogsOwned }: OwnerStatsBarProps) {
  const stats = [
    { label: 'Seguidores', value: followers },
    { label: 'Siguiendo', value: following },
    { label: 'Perros', value: dogsOwned },
  ];

  return (
    <div className="flex flex-wrap justify-center gap-3 px-4 py-6 border-b border-surface">
      {stats.map((stat, index) => (
        <React.Fragment key={stat.label}>
          <div className="flex min-w-[100px] flex-col gap-1 items-center text-center px-4">
            <p className="text-white tracking-tight text-2xl font-bold">{stat.value}</p>
            <p className="text-text-secondary text-sm font-medium">{stat.label}</p>
          </div>
          {index < stats.length - 1 && (
            <div className="w-px h-10 bg-surface my-auto hidden sm:block"></div>
          )}
        </React.Fragment>
      ))}
    </div>
  );
}