8-bit Difficulty Select

1"use client";
2 
3import * as React from "react";
4 
5import { cn } from "@/lib/utils";
6 
7import { Button } from "@/components/ui/8bit/button";
8import {
9  Card,
10  CardContent,
11  CardDescription,
12  CardHeader,
13  CardTitle,
14} from "@/components/ui/8bit/card";
15 
16export type Difficulty = "easy" | "normal" | "hard";
17 
18export interface DifficultySelectProps
19  extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
20  value?: Difficulty;
21  defaultValue?: Difficulty;
22  onChange?: (value: Difficulty) => void;
23  title?: string;
24  description?: string;
25  vertical?: boolean;
26}
27 
28export default function DifficultySelect({
29  className,
30  value,
31  defaultValue = "normal",
32  onChange,
33  title = "Select Difficulty",
34  description,
35  vertical = true,
36  ...props
37}: DifficultySelectProps) {
38  const isControlled = value !== undefined;
39  const [internalValue, setInternalValue] =
40    React.useState<Difficulty>(defaultValue);
41 
42  const selected = isControlled ? (value as Difficulty) : internalValue;
43 
44  const setSelected = React.useCallback(
45    (next: Difficulty) => {
46      if (!isControlled) setInternalValue(next);
47      onChange?.(next);
48    },
49    [isControlled, onChange]
50  );
51 
52  return (
53    <Card className={cn(className)} {...props}>
54      <CardHeader className="flex flex-col items-center justify-center gap-4">
55        <CardTitle>{title}</CardTitle>
56        {description ? <CardDescription>{description}</CardDescription> : null}
57      </CardHeader>
58      <CardContent>
59        <div
60          className={cn("gap-4", vertical ? "flex flex-col" : "flex flex-row")}
61        >
62          <Button
63            className="flex items-center justify-center"
64            variant={selected === "easy" ? "default" : "secondary"}
65            onClick={() => setSelected("easy")}
66          >
67            EASY
68          </Button>
69          <Button
70            className="flex items-center justify-center"
71            variant={selected === "normal" ? "default" : "secondary"}
72            onClick={() => setSelected("normal")}
73          >
74            NORMAL
75          </Button>
76          <Button
77            className="flex items-center justify-center"
78            variant={selected === "hard" ? "default" : "secondary"}
79            onClick={() => setSelected("hard")}
80          >
81            HARD
82          </Button>
83        </div>
84      </CardContent>
85    </Card>
86  );
87}