'use client';

import React from 'react';
import { Users, UserPlus } from 'lucide-react';
import { Card } from '@/ui/Card';
import { Stack } from '@/ui/Stack';
import { Heading } from '@/ui/Heading';
import { Box } from '@/ui/Box';
import { Text } from '@/ui/Text';
import { Link } from '@/ui/Link';
import { Image } from '@/ui/Image';
import { Button } from '@/ui/Button';
import { routes } from '@/lib/routing/RouteConfig';

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 gap={4}>
        <Stack direction="row" align="center" justify="between">
          <Heading level={3} icon={<Users style={{ width: '1.25rem', height: '1.25rem', color: '#a855f7' }} />}>
            Friends
          </Heading>
          <Text size="xs" color="text-gray-500">{friends.length} friends</Text>
        </Stack>
        {hasFriends ? (
          <Stack gap={2}>
            {friends.slice(0, 6).map((friend) => (
              <Box key={friend.id} style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', padding: '0.5rem', borderRadius: '0.5rem' }}>
                <Box style={{ width: '2.25rem', height: '2.25rem', borderRadius: '9999px', overflow: 'hidden', background: 'linear-gradient(to bottom right, #3b82f6, #9333ea)' }}>
                  <Image
                    src={friend.avatarUrl}
                    alt={friend.name}
                    width={36}
                    height={36}
                    style={{ width: '100%', height: '100%', objectFit: 'cover' }}
                  />
                </Box>
                <Box style={{ flex: 1, minWidth: 0 }}>
                  <Text size="sm" color="text-white" weight="medium" truncate block>{friend.name}</Text>
                  <Text size="xs" color="text-gray-500" block>{friend.country}</Text>
                </Box>
              </Box>
            ))}
            {friends.length > 6 && (
              <Box py={2}>
                <Link
                  href={routes.protected.profile}
                  variant="primary"
                >
                  <Text size="sm" block style={{ textAlign: 'center' }}>+{friends.length - 6} more</Text>
                </Link>
              </Box>
            )}
          </Stack>
        ) : (
          <Stack align="center" gap={2} py={6}>
            <UserPlus style={{ width: '2rem', height: '2rem', color: '#525252' }} />
            <Text size="sm" color="text-gray-400">No friends yet</Text>
            <Box>
              <Link href={routes.public.drivers} variant="ghost">
                <Button variant="secondary" size="sm">
                  Find Drivers
                </Button>
              </Link>
            </Box>
          </Stack>
        )}
      </Stack>
    </Card>
  );
}