"use client";

import { useState } from "react";
import TextInput from "../components/TextInput";
import SelectInput from "../components/SelectInput";

export default function ComponentsPreview() {
  const [defaultInputValue, setDefaultInputValue] = useState("");
  const [activeInputValue, setActiveInputValue] = useState("");
  const [errorInputValue, setErrorInputValue] = useState("");
  const [selectValue, setSelectValue] = useState("");

  return (
    <div className="min-h-screen bg-[var(--color-surface-default-primary)] p-[var(--spacing-scale-032)]">
      <div className="max-w-[1200px] mx-auto space-y-[var(--spacing-scale-064)]">
        <header className="space-y-[var(--spacing-scale-008)]">
          <h1 className="font-bricolage-grotesque text-[48px] leading-[56px] font-bold text-[var(--color-content-default-primary)]">
            Component Preview
          </h1>
          <p className="font-inter text-[18px] leading-[24px] text-[var(--color-content-default-secondary)]">
            Temporary page for viewing and testing new components
          </p>
        </header>

        {/* Text Input Section */}
        <section className="space-y-[var(--spacing-scale-024)]">
          <h2 className="font-bricolage-grotesque text-[32px] leading-[40px] font-bold text-[var(--color-content-default-primary)]">
            Text Input Component
          </h2>

          <div className="bg-[var(--color-surface-default-secondary)] rounded-[var(--radius-300,12px)] p-[var(--spacing-scale-032)] space-y-[var(--spacing-scale-024)]">
            <div className="space-y-[var(--spacing-scale-016)]">
              <div>
                <h3 className="font-inter text-[20px] leading-[24px] font-semibold text-[var(--color-content-default-primary)] mb-[var(--spacing-scale-012)]">
                  States
                </h3>
                <div className="space-y-[var(--spacing-scale-016)]">
                  <TextInput
                    label="Default Text Input"
                    placeholder="Enter text"
                    value={defaultInputValue}
                    onChange={(e) => setDefaultInputValue(e.target.value)}
                  />
                  <TextInput
                    label="Interactive Text Input (click = active, tab = focus)"
                    placeholder="Enter text"
                    value={activeInputValue}
                    onChange={(e) => setActiveInputValue(e.target.value)}
                  />
                  <TextInput
                    label="Disabled Text Input"
                    placeholder="Enter text"
                    value=""
                    disabled
                  />
                  <TextInput
                    label="Error Text Input"
                    placeholder="Enter text"
                    value={errorInputValue}
                    onChange={(e) => setErrorInputValue(e.target.value)}
                    error
                  />
                </div>
              </div>

            </div>
          </div>
        </section>

        {/* Select Input Section */}
        <section className="space-y-[var(--spacing-scale-024)]">
          <h2 className="font-bricolage-grotesque text-[32px] leading-[40px] font-bold text-[var(--color-content-default-primary)]">
            Select Input Component
          </h2>

          <div className="bg-[var(--color-surface-default-secondary)] rounded-[var(--radius-300,12px)] p-[var(--spacing-scale-032)] space-y-[var(--spacing-scale-024)]">
            <div className="space-y-[var(--spacing-scale-016)]">
              <div>
                <h3 className="font-inter text-[20px] leading-[24px] font-semibold text-[var(--color-content-default-primary)] mb-[var(--spacing-scale-012)]">
                  All Sizes
                </h3>
            <div className="space-y-[var(--spacing-scale-016)]">
                  <SelectInput
                    label="Small Select Input"
                    placeholder="Choose an option"
                    size="small"
                    value={selectValue}
                    onChange={(data) => setSelectValue(data.target.value)}
                    options={[
                      { value: "option1", label: "Option 1" },
                      { value: "option2", label: "Option 2" },
                      { value: "option3", label: "Option 3" },
                    ]}
                  />
                  <SelectInput
                    label="Medium Select Input"
                    placeholder="Choose an option"
                    size="medium"
                    value={selectValue}
                    onChange={(data) => setSelectValue(data.target.value)}
                    options={[
                      { value: "option1", label: "Option 1" },
                      { value: "option2", label: "Option 2" },
                      { value: "option3", label: "Option 3" },
                    ]}
                  />
                  <SelectInput
                    label="Large Select Input"
                    placeholder="Choose an option"
                    size="large"
                    value={selectValue}
                    onChange={(data) => setSelectValue(data.target.value)}
                    options={[
                      { value: "option1", label: "Option 1" },
                      { value: "option2", label: "Option 2" },
                      { value: "option3", label: "Option 3" },
                    ]}
                  />
              </div>
              </div>

              <div>
                <h3 className="font-inter text-[20px] leading-[24px] font-semibold text-[var(--color-content-default-primary)] mb-[var(--spacing-scale-012)]">
                  States
                </h3>
            <div className="space-y-[var(--spacing-scale-016)]">
                  <SelectInput
                    label="Default Select Input"
                    placeholder="Choose an option"
                    value=""
                    options={[
                      { value: "option1", label: "Option 1" },
                      { value: "option2", label: "Option 2" },
                      { value: "option3", label: "Option 3" },
                    ]}
                  />
                  <SelectInput
                    label="Disabled Select Input"
                    placeholder="Choose an option"
                    value=""
                    disabled
                    options={[
                      { value: "option1", label: "Option 1" },
                      { value: "option2", label: "Option 2" },
                      { value: "option3", label: "Option 3" },
                    ]}
                  />
                  <SelectInput
                    label="Error Select Input"
                    placeholder="Choose an option"
                    value=""
                    error
                    options={[
                      { value: "option1", label: "Option 1" },
                      { value: "option2", label: "Option 2" },
                      { value: "option3", label: "Option 3" },
                    ]}
                  />
                </div>
              </div>

              <div>
                <h3 className="font-inter text-[20px] leading-[24px] font-semibold text-[var(--color-content-default-primary)] mb-[var(--spacing-scale-012)]">
                  Label Variants
                </h3>
                <div className="space-y-[var(--spacing-scale-016)]">
                  <SelectInput
                    label="Default Label"
                    placeholder="Choose an option"
                    value=""
                    labelVariant="default"
                    options={[
                      { value: "option1", label: "Option 1" },
                      { value: "option2", label: "Option 2" },
                      { value: "option3", label: "Option 3" },
                    ]}
                  />
                  <SelectInput
                    label="Horizontal Label"
                    placeholder="Choose an option"
                    value=""
                    labelVariant="horizontal"
                    options={[
                      { value: "option1", label: "Option 1" },
                      { value: "option2", label: "Option 2" },
                      { value: "option3", label: "Option 3" },
                    ]}
                  />
                </div>
            </div>
            </div>
          </div>
        </section>
      </div>
    </div>
  );
}