'use client';

import React from 'react';
import { Section } from '@/ui/Section';
import { Heading } from '@/ui/Heading';
import { Text } from '@/ui/Text';
import { Button } from '@/ui/Button';
import { Stack } from '@/ui/Stack';
import { Group } from '@/ui/Group';
import { Panel } from '@/ui/Panel';
import { Icon } from '@/ui/Icon';
import { ArrowRight, Database } from 'lucide-react';
import { routes } from '@/lib/routing/RouteConfig';

/**
 * MigrationSection - Offers help with migrating existing league data.
 */
export function MigrationSection() {
  return (
    <Section variant="default" padding="lg">
      <Panel variant="bordered" padding="xl">
        <Group justify="between" align="center" gap={12} wrap>
          <Stack gap={6} flex={1} minWidth="20rem">
            <Group gap={3}>
              <Icon icon={Database} size={5} intent="primary" />
              <Text variant="primary" weight="bold" uppercase size="xs">League Migration</Text>
            </Group>
            <Heading level={2} weight="bold">Moving from Sheets or Discord?</Heading>
            <Text variant="med" size="lg">
              We know that moving years of history is daunting. Send us your data, and we will handle the migration for you — for free. 
              We support CSV, Google Sheets, and manual data entry.
            </Text>
          </Stack>
          
          <Button 
            as="a"
            href={routes.league.migration}
            variant="primary" 
            size="lg" 
            icon={<Icon icon={ArrowRight} size={4} />}
          >
            Start Migration
          </Button>
        </Group>
      </Panel>
    </Section>
  );
}