import { TextField } from "@/components/textfield"
import { EyeIcon, EyeClosedIcon } from "lucide-react"
import { useState } from "react"

// 기본 사용 예시
function BasicExample() {
  return (
    <TextField
      id="email"
      label="이메일"
      helperText="이메일을 입력하세요"
      placeholder="example@email.com"
      required
    />
  )
}

// 비밀번호 입력 필드 예시 (토글 가능한 표시/숨김 버튼)
function PasswordExample() {
  const [isVisible, setIsVisible] = useState(false)

  return (
    <TextField
      id="password"
      label="비밀번호"
      type={isVisible ? "text" : "password"}
      helperText="8자 이상 입력하세요"
      trailingAddon={
        isVisible ? (
          <EyeIcon onClick={() => setIsVisible(false)} />
        ) : (
          <EyeClosedIcon onClick={() => setIsVisible(true)} />
        )
      }
    />
  )
}

// 오류 상태 예시
function ErrorExample() {
  return (
    <TextField
      id="username"
      label="사용자 이름"
      value="inv@lid"
      status="negative"
      helperText="유효하지 않은 사용자 이름입니다"
    />
  )
}