import {
  Card,
  CardActionArea,
  CardContent,
  Typography,
  useTheme,
} from "@mui/material";
import { FC } from "react";

type AttackItemProps = {
  attackName: string;
};

export const AttackItem: FC<AttackItemProps> = ({ attackName }) => {
  // contexts
  const theme = useTheme();

  return (
    <Card
      sx={{
        backgroundColor: theme.palette.background.default,
        borderRadius: "8px",
      }}
      variant="outlined"
    >
      <CardActionArea
        onClick={() => {
          console.log("clicked");
        }}
      >
        <CardContent>
          <Typography component="div">{attackName}</Typography>
        </CardContent>
      </CardActionArea>
    </Card>
  );
};
