'use client';

type FreshUser = {
  id: number;
  name: string;
  avatar: string;
};

type Props = {
  users: FreshUser[];
  onSelectUser: (userId: number | null) => void;
};

export default function FreshPostsSlider({ users, onSelectUser }: Props) {
  return (
    <div
      style={{
        display: 'flex',
        gap: '0.8rem',
        overflowX: 'auto',
        paddingBottom: '0.5rem',
      }}
    >
      {/* Alle */}
      <button
        onClick={() => onSelectUser(null)}
        style={{
          minWidth: '64px',
          height: '64px',
          borderRadius: '50%',
          border: '2px solid #ccc',
          background: '#f5f5f5',
          cursor: 'pointer',
          fontWeight: 600,
        }}
      >
        Alle
      </button>

      {users.map((user) => (
        <button
          key={user.id}
          onClick={() => onSelectUser(user.id)}
          style={{
            minWidth: '64px',
            height: '64px',
            borderRadius: '50%',
            border: '2px solid #2E7D32',
            backgroundImage: `url(${user.avatar})`,
            backgroundSize: 'cover',
            backgroundPosition: 'center',
            cursor: 'pointer',
          }}
          title={user.name}
        />
      ))}
    </div>
  );
}