'use client';

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

/**
 * QuickLinksPanel - Semantic quick actions bar.
 */
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 (
    <Container>
      <ButtonGroup alignment="center" gap={4} marginTop={8}>
        {links.map((link) => (
          <Button
            key={link.label}
            as="a"
            href={link.href}
            variant="secondary"
            icon={<Icon icon={link.icon} size={4} intent="low" />}
          >
            {link.label}
          </Button>
        ))}
      </ButtonGroup>
    </Container>
  );
}