import { Card, CardActionArea, CardContent, Typography, useTheme } from "@mui/material";
import { FC } from "react";
import { routeAtom, Routes } from "../../../lib/jotai";
import { useAtom } from "jotai";

type AttackItemProps = {
  attackName: string;
  routeTarget: Routes;
};

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

  // atoms
  const [route, setRoute] = useAtom(routeAtom);

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