Tournament Bracket Visualization

import React from 'react';
import { TreeChart } from 'treecharts-react';

// Tournament bracket data structure
const tournamentBracketData = {
  value: "Final",
  description: "Brazil vs France",
  nodeConfig: {
    type: "node-with-description" as const,
    color: "#FFD700",
    fontColor: "#333",
    borderColor: "#FFA500",
    borderWidth: 2,
    width: 120,
  },
  child: [
    {
      value: "Semi-Final 1",
      description: "Brazil vs Germany",
      edgeText: "Brazil Wins 2-1",
      nodeConfig: {
        type: "node-with-description" as const,
        color: "#4CAF50",
        fontColor: "white",
        borderColor: "#2E7D32",
        borderWidth: 2,
        width: 130,
      },
      child: [
        {
          value: "Brazil",
          description: "Advances",
          edgeText: "2-1",
          nodeConfig: {
            type: "node-with-description" as const,
            color: "#4CAF50",
            fontColor: "white",
            borderColor: "#2E7D32",
            borderWidth: 2,
            width: 100,
          },
          child: [],
        },
        {
          value: "Germany",
          description: "Eliminated",
          edgeText: "1-2",
          nodeConfig: {
            type: "node-with-description" as const,
            color: "#9E9E9E",
            fontColor: "white",
            borderColor: "#616161",
            borderWidth: 2,
            width: 100,
          },
          child: [],
        },
      ],
    },
    {
      value: "Semi-Final 2",
      description: "France vs Spain",
      edgeText: "France Wins 3-1",
      nodeConfig: {
        type: "node-with-description" as const,
        color: "#9E9E9E",
        fontColor: "white",
        borderColor: "#616161",
        borderWidth: 2,
        width: 130,
      },
      child: [
        {
          value: "France",
          description: "Advances",
          edgeText: "3-1",
          nodeConfig: {
            type: "node-with-description" as const,
            color: "#9E9E9E",
            fontColor: "white",
            borderColor: "#616161",
            borderWidth: 2,
            width: 100,
          },
          child: [],
        },
        {
          value: "Spain",
          description: "Eliminated",
          edgeText: "1-3",
          nodeConfig: {
            type: "node-with-description" as const,
            color: "#9E9E9E",
            fontColor: "white",
            borderColor: "#616161",
            borderWidth: 2,
            width: 100,
          },
          child: [],
        },
      ],
    },
  ],
};

export default function TournamentBracketExample() {
  return (
    <div className="w-full">
      <TreeChart
        data={tournamentBracketData}
        type="right-angle"
        edgeConfig={{
          color: "#666",
          width: 2,
          textColor: "#333",
        }}
        titleConfig={{
          title: "Tournament Semi-Finals & Final",
          description: "4-team tournament bracket with semi-finals and final",
        }}
      />
    </div>
  );
}