"use client"

import { FC } from "react"
import { Card } from "@/components/ui/card"
import { CopyButton } from "@/app/(dashboard)/getting-started/copy-button"

interface TerminalCardProps {
  command: string
}

const TerminalCard: FC<TerminalCardProps> = ({ command }) => (
  <Card className="bg-muted/50 border-0 p-4 rounded-lg relative overflow-hidden">
    <div className="absolute top-0 left-0 right-0 bg-muted/80 px-4 py-1.5 border-b border-border/30 flex items-center">
      <div className="flex space-x-1.5">
        <div className="w-3 h-3 rounded-full bg-red-400"></div>
        <div className="w-3 h-3 rounded-full bg-yellow-400"></div>
        <div className="w-3 h-3 rounded-full bg-green-400"></div>
      </div>
      <span className="text-xs text-muted-foreground ml-auto">Terminal</span>
    </div>
    <div className="flex items-center font-mono mt-5 pt-2">
      <div className="text-muted-foreground mr-2">$</div>
      <pre className="text-sm overflow-x-auto whitespace-pre-wrap text-foreground">
        <span className="text-green-600 dark:text-green-400">{command}</span>
      </pre>
    </div>
    <div className="absolute right-3 top-1/2 -translate-y-1/2 mt-2">
      <CopyButton text={command} />
    </div>
  </Card>
)

export default TerminalCard
