import { Button } from '@tidbcloud/uikit'
import { CodeBlock } from '@tidbcloud/uikit/biz'
import React from 'react'

import PrivateDNSInstruction from 'media/private-dns-instruction.png'

import Instruction from '../Components/Instruction'

export default ({
  vpcEndpointId,
  onPrev,
  onNext,
  cancel,
  region
}: {
  vpcEndpointId: string
  onPrev: () => void
  onNext: () => void
  cancel: React.ReactNode
  region: string
}) => {
  const code = `aws ec2 modify-vpc-endpoint --vpc-endpoint-id ${
    vpcEndpointId || '<your_vpc_endpoint_id>'
  } --region ${region} --private-dns-enabled`
  return (
    <>
      <div className="step-content">
        <h3>Enable Your Endpoint Private DNS</h3>
        <p>In order to finalize your Endpoint Connection, you need to enable private DNS names.</p>
        <CodeBlock language="bash">{code}</CodeBlock>
        <Instruction title="" imageSrc={PrivateDNSInstruction} />
      </div>

      <div className="step-actions">
        {cancel}
        <div>
          <Button
            variant="default"
            type="button"
            data-mp-event="Enable Private DNS Back Button Clicked"
            onClick={onPrev}
          >
            Back
          </Button>
          <Button type="button" data-mp-event="Enable Private DNS Create Button Clicked" onClick={onNext}>
            Create
          </Button>
        </div>
      </div>
    </>
  )
}