import React, { useContext } from 'react';
import styled from 'styled-components';

import type { JSX } from 'react';
import type { CodeWalkthroughFile } from '@redocly/config';

import { CodeWalkthroughControlsStateContext } from '@redocly/theme/core/contexts';
import { CopyButton } from '@redocly/theme/components/Buttons/CopyButton';

export type CodeToolbarProps = {
  file: CodeWalkthroughFile;
};

export function CodePanelToolbar({ file }: CodeToolbarProps): JSX.Element {
  const { getFileText } = useContext(CodeWalkthroughControlsStateContext);

  const fileContent = getFileText(file);

  return (
    <CodeToolbarWrapper data-component-name="Markdoc/CodeWalkthrough/CodePanelToolbar">
      <CopyButton data={fileContent} type="compound" variant="secondary" size="medium" />
    </CodeToolbarWrapper>
  );
}

const CodeToolbarWrapper = styled.div`
  display: flex;
  position: absolute;
  bottom: var(--spacing-sm);
  right: var(--spacing-sm);
  gap: var(--spacing-xs);
`;