import { Property, Player } from "@/types/game";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";

interface ActionPanelProps {
  currentPlayer: Player;
  currentProperty: Property | null;
  canBuy: boolean;
  onBuy: () => void;
  onEndTurn: () => void;
  message: string;
}

export const ActionPanel = ({
  currentPlayer,
  currentProperty,
  canBuy,
  onBuy,
  onEndTurn,
  message,
}: ActionPanelProps) => {
  return (
    <Card className="p-6">
      <div className="space-y-4">
        <div className="text-center">
          <div className="text-sm text-muted-foreground mb-2">Current Turn</div>
          <div className="flex items-center justify-center gap-2">
            <div
              className="w-8 h-8 rounded-full border-2 border-foreground"
              style={{ backgroundColor: currentPlayer.color }}
            />
            <span className="font-bold text-lg text-foreground">{currentPlayer.name}</span>
          </div>
        </div>

        {message && (
          <div className="text-center p-3 bg-muted rounded-lg">
            <p className="text-sm text-foreground">{message}</p>
          </div>
        )}

        {currentProperty && currentProperty.owner === null && canBuy && (
          <div className="space-y-3">
            <div className="text-center">
              <div className="font-semibold text-foreground">{currentProperty.name}</div>
              <div className="text-sm text-muted-foreground">
                Price: <span className="text-money-gold font-semibold">${currentProperty.price}</span>
              </div>
              <div className="text-xs text-muted-foreground">
                Rent: ${currentProperty.rent}
              </div>
            </div>
            <Button
              onClick={onBuy}
              className="w-full bg-gradient-wealth hover:opacity-90 font-bold"
              disabled={currentPlayer.money < currentProperty.price}
            >
              Buy Property
            </Button>
          </div>
        )}

        <Button
          onClick={onEndTurn}
          variant="secondary"
          className="w-full"
        >
          End Turn
        </Button>
      </div>
    </Card>
  );
};