import { CopyButton } from "@/components/copybutton";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { MapIframe } from "./client";
import { Kbd } from "@/components/ui/kbd"
import Image from 'next/image';

export default function MinecraftJoinPage() {
  return ( 
    <div className="container max-w-4xl py-10 mx-auto">
      <div className="fixed inset-0 -z-10">
        <Image 
          src="/mc-bg.png"
          alt="bg"
          fill
          className="object-cover"
        />
      </div>
      <Card className="mb-8">
        <CardHeader>
          <CardTitle>Erika's SMP</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="flex items-center justify-between p-4 border rounded-lg bg-muted/50">
            <div>
              <p className="text-sm font-medium text-muted-foreground">Server Address</p>
              <p className="font-mono text-lg">erique.sudloh.com</p>
            </div>
            <CopyButton text="erique.sudloh.com" iconOnly={false} variant="outline">
              คัดลอง Ip
            </CopyButton>
          </div>
          <div className="flex items-center justify-between p-4 border rounded-lg bg-muted/50">
            <div>
              <p className="text-sm font-medium text-muted-foreground">Port</p> <Kbd> ใช้แค่ Bedrock </Kbd>
              <p className="font-mono text-lg">30652</p>
            </div>
            <CopyButton text="30652" iconOnly={false} variant="outline">
              คัดลอง Port
            </CopyButton>
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle>หลังเข้าเซิร์ฟต้องทำยังไง?</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="overflow-hidden rounded-lg border aspect-video bg-muted">
            <MapIframe />
          </div>
        </CardContent>
      </Card>
    </div>
  );
}