"use client";

import { signIn } from "next-auth/react";
import { DiscordIcon } from "@/lib/icons";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";

export function ProfileLoginCard() {
  return (
    <Card className="mx-auto w-full max-w-md">
      <CardHeader>
        <CardTitle>ดูโปรไฟล์ของคุณ</CardTitle>
        <CardDescription>
          เข้าสู่ระบบด้วย Discord เพื่อดูเลเวล XP เวลาในห้องเสียง และอันดับของคุณ
        </CardDescription>
      </CardHeader>
      <CardContent className="text-sm text-muted-foreground">
        ระบบใช้บัญชี Discord เพื่อจับคู่คุณกับข้อมูลกิจกรรมในเซิร์ฟเวอร์ Erika!
      </CardContent>
      <CardFooter>
        <Button
          className="w-full"
          onClick={() => signIn("discord", { callbackUrl: "/profile" })}
        >
          <DiscordIcon data-icon="inline-start" />
          ดำเนินการต่อด้วย Discord
        </Button>
      </CardFooter>
    </Card>
  );
}