import streamlit as st
import svgwrite

# Define the card suits and values
suits = ["clubs", "diamonds", "hearts", "spades"]
values = ["A", "2", "3", "4", "5", "6", "7", "8", "9", "10", "J", "Q", "K"]

# Define the size of the cards
CARD_WIDTH = 75
CARD_HEIGHT = 100

# Define the size of the SVG canvas
CANVAS_WIDTH = CARD_WIDTH * 13
CANVAS_HEIGHT = CARD_HEIGHT * 4

# Load the SVG pictures for the card suits
club = svgwrite.image.Image("https://upload.wikimedia.org/wikipedia/commons/2/25/Svg_deck_01.svg", size=(40, 40))
diamond = svgwrite.image.Image("https://upload.wikimedia.org/wikipedia/commons/9/9f/Svg_deck_03.svg", size=(40, 40))
heart = svgwrite.image.Image("https://upload.wikimedia.org/wikipedia/commons/f/f7/Svg_deck_05.svg", size=(40, 40))
spade = svgwrite.image.Image("https://upload.wikimedia.org/wikipedia/commons/e/eb/Svg_deck_06.svg", size=(40, 40))

# Create a new SVG drawing
dwg = svgwrite.Drawing(size=(f"{CANVAS_WIDTH}px", f"{CANVAS_HEIGHT}px"))

# Draw each card in the SVG canvas
for suit_idx, suit in enumerate(suits):
    for value_idx, value in enumerate(values):
        # Calculate the position of the card on the canvas
        x = CARD_WIDTH * value_idx
        y = CARD_HEIGHT * suit_idx

        # Draw the card border
        dwg.add(dwg.rect((x, y), (CARD_WIDTH, CARD_HEIGHT), rx=10, ry=10, fill="white", stroke="black", stroke_width=2))

        # Draw the card suit picture
        suit_picture = None
        if suit == "clubs":
            suit_picture = club
        elif suit == "diamonds":
            suit_picture = diamond
        elif suit == "hearts":
            suit_picture = heart
        elif suit == "spades":
            suit_picture = spade
        suit_picture.translate(x + CARD_WIDTH // 2 - 20, y + CARD_HEIGHT // 2 - 20)
        dwg.add(suit_picture)

        # Draw the card value
        value = svgwrite.text.Text(value, insert=(x + 5, y + CARD_HEIGHT - 10), fill="black", font_size="16px", font_weight="bold")
        dwg.add(value)

# Convert the SVG drawing to a string
svg_string = dwg.tostring()

# Display the SVG canvas in the Streamlit app
st.write(f'<svg viewBox="0 0 {CANVAS_WIDTH} {CANVAS_HEIGHT}">{svg_string}</svg>', unsafe_allow_html=True)