"use client"

import * as React from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"

interface TestComponentProps {
  teamId: string
  teamName: string
}

export function TestComponent({ teamId, teamName }: TestComponentProps) {
  return (
    <Card className="w-full">
      <CardHeader>
        <div className="flex items-center justify-between">
          <div>
            <CardTitle className="flex items-center gap-2">{teamName} - Test Component</CardTitle>
            <CardDescription>Testing if React components load properly (Team ID: {teamId})</CardDescription>
          </div>
        </div>
      </CardHeader>
      <CardContent>
        <div className="border rounded-lg p-4">
          <p>This is a test component to verify React is working.</p>
          <p>If you can see this, the basic React setup is functional.</p>
          <p>Auto-commit test: {new Date().toISOString()}</p>
        </div>
      </CardContent>
    </Card>
  )
}