'use client';

import React from 'react';
import { Card } from '@/ui/Card';
import { Box } from '@/ui/Box';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { Surface } from '@/ui/Surface';
import { SponsorLogo } from '@/ui/SponsorLogo';

interface SponsorBrandingPreviewProps {
  name: string;
  logoUrl?: string;
  primaryColor?: string;
  secondaryColor?: string;
}

/**
 * SponsorBrandingPreview
 * 
 * Visualizes how a sponsor's branding (logo and colors) will appear on the platform.
 */
export function SponsorBrandingPreview({ 
  name, 
  logoUrl, 
  primaryColor = '#198CFF', 
  secondaryColor = '#141619' 
}: SponsorBrandingPreviewProps) {
  return (
    <Card p={0} overflow="hidden">
      <Box p={4} borderBottom borderColor="border-charcoal-outline">
        <Text size="xs" weight="bold" uppercase letterSpacing="wider" color="text-gray-400">
          Branding Preview
        </Text>
      </Box>
      
      <Box p={6}>
        <Stack gap={6}>
          {/* Logo Preview */}
          <Stack align="center" gap={4}>
            <Surface 
              variant="muted" 
              rounded="xl" 
              padding={8} 
              bg="bg-iron-gray/10" 
              border 
              borderColor="border-charcoal-outline/50"
              w="full"
              display="flex"
              alignItems="center"
              justifyContent="center"
            >
              <SponsorLogo src={logoUrl} alt={name} size={64} />
            </Surface>
            <Text size="sm" color="text-gray-400">Primary Logo Asset</Text>
          </Stack>

          {/* Color Palette */}
          <Box>
            <Text size="xs" weight="bold" uppercase letterSpacing="wider" color="text-gray-500" block mb={3}>
              Color Palette
            </Text>
            <Stack direction="row" gap={4}>
              <Stack gap={2} flexGrow={1}>
                <Box h={12} rounded="lg" backgroundColor={primaryColor} border borderColor="border-white/10" />
                <Text size="xs" color="text-gray-400" textAlign="center">{primaryColor}</Text>
              </Stack>
              <Stack gap={2} flexGrow={1}>
                <Box h={12} rounded="lg" backgroundColor={secondaryColor} border borderColor="border-white/10" />
                <Text size="xs" color="text-gray-400" textAlign="center">{secondaryColor}</Text>
              </Stack>
            </Stack>
          </Box>

          {/* Mockup Hint */}
          <Surface variant="muted" rounded="lg" padding={3} bg="bg-primary-blue/5" border borderColor="border-primary-blue/20">
            <Text size="xs" color="text-primary-blue" textAlign="center">
              These assets will be used for broadcast overlays and car liveries.
            </Text>
          </Surface>
        </Stack>
      </Box>
    </Card>
  );
}