import * as React from 'react';
import { useTranslation } from 'react-i18next';
import {
  Button,
  Card,
  CardBody,
  CardHeader,
  CardTitle,
  Spinner,
  Text,
  TextContent,
} from '@patternfly/react-core';
import { CheckCircleIcon, PauseIcon, PlayIcon } from '@patternfly/react-icons';
import './project-pause-card.css';

type ProjectState = {
  isPaused: boolean;
  pausedSince?: string;
  isLoading: boolean;
  error?: string;
};

export default function ProjectPauseCard() {
  const { t } = useTranslation('plugin__project-pause-plugin');
  const [projectState, setProjectState] = React.useState<ProjectState>({
    isPaused: false,
    isLoading: true,
  });

  // Same functionality as ExamplePage but in card form
  // ... (copy the useEffect, fetchProjectState, handlePauseProject, and formatTimestamp functions)

  return (
    <Card>
      <CardHeader>
        <CardTitle>{t('Project Status')}</CardTitle>
      </CardHeader>
      <CardBody>
        {projectState.error ? (
          <Text component="p" className="project-pause-plugin__error">
            {projectState.error}
          </Text>
        ) : (
          <TextContent>
            <Text component="p" className="project-pause-plugin__controls">
              <Button 
                variant="primary"
                icon={projectState.isPaused ? <PlayIcon /> : <PauseIcon />}
                onClick={handlePauseProject}
                isDisabled={projectState.isLoading}
              >
                {projectState.isLoading ? (
                  <>
                    <Spinner size="sm" /> {t('Processing...')}
                  </>
                ) : projectState.isPaused ? (
                  t('Resume Project')
                ) : (
                  t('Pause Project')
                )}
              </Button>
            </Text>
            <Text component="p">
              <span className="project-pause-plugin__status">
                <CheckCircleIcon /> {t('Status:')} {projectState.isPaused ? t('Paused') : t('Running')}
              </span>
            </Text>
            {projectState.isPaused && projectState.pausedSince && (
              <Text component="p" className="project-pause-plugin__timestamp">
                {t('Paused since:')} {formatTimestamp(projectState.pausedSince)}
              </Text>
            )}
          </TextContent>
        )}
      </CardBody>
    </Card>
  );
} 