"use client";

import React from "react";
import { useDispatch } from "react-redux";
import { Button, Box, Typography, Stack } from "@mui/material";
import { AppDispatch } from "@/app/redux/types";
import { autoLogout, refreshAuthStatus } from "@/app/redux/auth/authSlice";

export default function TestTokenExpiration() {
  const dispatch = useDispatch<AppDispatch>();

  const handleTestExpiration = () => {
    dispatch(autoLogout("Manual test expiration"));
  };

  const handleRefreshAuth = () => {
    dispatch(refreshAuthStatus());
  };

  return (
    <Box sx={{ p: 2, border: "1px solid #ccc", borderRadius: 1, mb: 2 }}>
      <Typography variant="h6" gutterBottom>
        Test Token Expiration
      </Typography>
      <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
        Test authentication functionality and token management.
      </Typography>
      <Stack direction="row" spacing={2}>
        <Button
          variant="outlined"
          color="warning"
          onClick={handleTestExpiration}
        >
          Test Auto-Logout
        </Button>
        <Button variant="outlined" color="primary" onClick={handleRefreshAuth}>
          Refresh Auth Status
        </Button>
      </Stack>
    </Box>
  );
}