'use client';

import React from 'react';
import { Button } from '@/ui/Button';
import { Icon } from '@/ui/Icon';
import { routes } from '@/lib/routing/RouteConfig';
import { Plus, Search, Shield, Users } from 'lucide-react';
import { Box } from '@/ui/Box';
import { Container } from '@/ui/Container';
import { Text } from '@/ui/Text';

/**
 * QuickLinksPanel - Semantic quick actions bar.
 * Replaces HomeQuickActions with a more semantic implementation.
 */
export function QuickLinksPanel() {
  const links = [
    { label: 'Find League', icon: Search, href: routes.public.leagues },
    { label: 'Join Team', icon: Users, href: routes.public.teams },
    { label: 'Create Race', icon: Plus, href: routes.protected.dashboard },
    { label: 'Rulebooks', icon: Shield, href: '#' },
  ];

  return (
    <Box as="nav" bg="panel-gray/50" py={8} borderBottom borderColor="border-gray/30">
      <Container>
        <Box display="flex" flexWrap="wrap" justifyContent="center" gap={4}>
          {links.map((link) => (
            <Button
              key={link.label}
              as="a"
              href={link.href}
              variant="secondary"
              display="flex"
              alignItems="center"
              gap={3}
              px={6}
              bg="graphite-black"
              borderColor="border-gray/50"
              hoverBorderColor="primary-accent/50"
              transition
              group
            >
              <Icon 
                icon={link.icon} 
                size={4} 
                color="text-gray-500"
                groupHoverTextColor="primary-accent"
                transition
              />
              <Text size="xs" weight="bold" uppercase letterSpacing="widest">
                {link.label}
              </Text>
            </Button>
          ))}
        </Box>
      </Container>
    </Box>
  );
}
