import { MinimalEmptyState } from '@/components/shared/state/EmptyState';
import { FriendItem } from '@/components/social/FriendItem';
import { FriendsList } from '@/components/social/FriendsList';
import { routes } from '@/lib/routing/RouteConfig';
import { Card } from '@/ui/Card';
import { Heading } from '@/ui/Heading';
import { Icon } from '@/ui/Icon';
import { Link } from '@/ui/Link';
import { Stack } from '@/ui/primitives/Stack';
import { Text } from '@/ui/Text';
import { UserPlus, Users } from 'lucide-react';

interface Friend {
  id: string;
  name: string;
  avatarUrl: string;
  country: string;
}

interface FriendsSidebarProps {
  friends: Friend[];
  hasFriends: boolean;
}

export function FriendsSidebar({ friends, hasFriends }: FriendsSidebarProps) {
  return (
    <Card>
      <Stack direction="row" align="center" justify="between" mb={4}>
        <Heading level={3} icon={<Icon icon={Users} size={5} color="var(--neon-purple)" />}>
          Friends
        </Heading>
        <Text size="xs" color="text-gray-500">{friends.length} friends</Text>
      </Stack>
      {hasFriends ? (
        <FriendsList>
          {friends.slice(0, 6).map((friend) => (
            <FriendItem
              key={friend.id}
              name={friend.name}
              avatarUrl={friend.avatarUrl}
              country={friend.country}
            />
          ))}
          {friends.length > 6 && (
            <Stack py={2}>
              <Link
                href={routes.protected.profile}
                variant="primary"
              >
                <Text size="sm" block align="center">+{friends.length - 6} more</Text>
              </Link>
            </Stack>
          )}
        </FriendsList>
      ) : (
        <MinimalEmptyState
          icon={UserPlus}
          title="No friends yet"
          description="Find drivers to follow"
          action={{
            label: 'Find Drivers',
            onClick: () => window.location.href = routes.public.drivers
          }}
        />
      )}
    </Card>
  );
}