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

# 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 symbol
        symbol = svgwrite.text.Text(suit.upper(), insert=(x + 5, y + 15), fill="black", font_size="16px", font_weight="bold")
        dwg.add(symbol)

        # 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)