import React from "react";
import { Box, Typography } from "@mui/material";

// Define the props interface for PuckDetailsVisual
interface PuckDetailsVisualProps {
    puckCount: number; // Total number of pucks
}

// This component purely represents a simple puck icon with 16 filled black circles
const SimplePuckIcon: React.FC = () => (
    <svg width="50" height="50" viewBox="0 0 100 100">
        <circle cx="50" cy="50" r="45" stroke="black" strokeWidth="2" fill="none" />
        {[...Array(11)].map((_, index) => {
            const angle = (index * (360 / 11)) * (Math.PI / 180);
            const x = 50 + 35 * Math.cos(angle);
            const y = 50 + 35 * Math.sin(angle);
            return <circle key={index} cx={x} cy={y} r="5" fill="black" />;
        })}
        {[...Array(5)].map((_, index) => {
            const angle = (index * (360 / 5) + 36) * (Math.PI / 180);
            const x = 50 + 15 * Math.cos(angle);
            const y = 50 + 15 * Math.sin(angle);
            return <circle key={index + 11} cx={x} cy={y} r="5" fill="black" />;
        })}
    </svg>
);

// A wrapper component for displaying the puck icon and the count
export const PuckDetailsVisual: React.FC<PuckDetailsVisualProps> = ({ puckCount }) => {
    return (
        <Box
            sx={{
                display: "flex",
                alignItems: "center",
                gap: 1,
            }}
        >
            <SimplePuckIcon />
            <Typography variant="body1" fontWeight="bold">
                {puckCount}
            </Typography>
        </Box>
    );
};

export default SimplePuckIcon; // Only SimplePuckIcon will be the default export