'use client';

import { IconButton } from '@/ui/IconButton';
import { Panel } from '@/ui/Panel';
import { Icon } from '@/ui/Icon';
import { Text } from '@/ui/Text';
import { Box } from '@/ui/Box';
import { Group } from '@/ui/Group';
import { Stack } from '@/ui/Stack';
import { ListItem, ListItemInfo, ListItemActions } from '@/ui/ListItem';
import { EmptyState } from '@/ui/EmptyState';
import { Check, Clock, X, UserPlus } from 'lucide-react';
import React from 'react';

interface JoinRequestsPanelProps {
  requests: Array<{
    id: string;
    driverName: string;
    driverAvatar?: string;
    message?: string;
    requestedAt: string;
  }>;
  onAccept: (id: string) => void;
  onDecline: (id: string) => void;
}

export function JoinRequestsPanel({ requests, onAccept, onDecline }: JoinRequestsPanelProps) {
  if (requests.length === 0) {
    return (
      <EmptyState
        icon={UserPlus}
        title="No pending join requests"
        variant="minimal"
      />
    );
  }

  return (
    <Panel title={`Pending Requests (${requests.length})`}>
      <Stack gap={3}>
        {requests.map((request) => (
          <ListItem key={request.id}>
            <ListItemInfo
              title={request.driverName}
              description={request.message}
              meta={
                <Group gap={1.5}>
                  <Icon icon={Clock} size={3} intent="low" />
                  <Text size="xs" variant="low" font="mono">{request.requestedAt}</Text>
                </Group>
              }
            />
            <ListItemActions>
              <IconButton 
                variant="secondary" 
                size="sm" 
                onClick={() => onDecline(request.id)}
                icon={X}
                intent="critical"
                title="Decline"
              />
              <IconButton 
                variant="primary" 
                size="sm" 
                onClick={() => onAccept(request.id)}
                icon={Check}
                title="Accept"
              />
            </ListItemActions>
          </ListItem>
        ))}
      </Stack>
    </Panel>
  );
}