'use client';

import { SegmentedControl } from '@/ui/SegmentedControl';
import { Icon } from '@/ui/Icon';
import { BarChart3, TrendingUp, User } from 'lucide-react';
import React from 'react';

export type ProfileTab = 'overview' | 'stats' | 'ratings';

interface ProfileTabsProps {
  activeTab: ProfileTab;
  onTabChange: (tab: ProfileTab) => void;
}

export function ProfileTabs({ activeTab, onTabChange }: ProfileTabsProps) {
  const options = [
    { id: 'overview', label: 'Overview', icon: <Icon icon={User} size={4} /> },
    { id: 'stats', label: 'Detailed Stats', icon: <Icon icon={BarChart3} size={4} /> },
    { id: 'ratings', label: 'Ratings', icon: <Icon icon={TrendingUp} size={4} /> },
  ];

  return (
    <SegmentedControl
      data-testid="profile-tabs"
      options={options}
      activeId={activeTab}
      onChange={(id) => onTabChange(id as ProfileTab)}
    />
  );
}