'use client';
import { useState } from 'react';
import { TextMorph } from '@/components/ui/text-morph';

function TextMorphButton() {
  const [text, setText] = useState('Continue');

  return (
    <button
      onClick={() => setText(text === 'Continue' ? 'Confirm' : 'Continue')}
      className='flex h-10 w-[120px] flex-shrink-0 items-center justify-center rounded-full bg-black px-4 text-base font-medium text-zinc-50 shadow-sm transition-colors hover:bg-zinc-800 dark:bg-zinc-50 dark:text-black dark:hover:bg-zinc-200'
    >
      <TextMorph>{text}</TextMorph>
    </button>
  );
}

function TextMorphInput() {
  const [text, setText] = useState('Craft');

  return (
    <div className='flex flex-col items-center justify-end space-y-12'>
      <TextMorph className='text-5xl font-medium text-black dark:text-white'>
        {text}
      </TextMorph>
      <input
        type='text'
        value={text}
        onChange={(e) => setText(e.target.value)}
        className='h-9 w-full rounded-lg border border-zinc-950/10 bg-transparent p-2 text-zinc-900 placeholder-zinc-500 focus:outline-none dark:border-zinc-50/10 dark:text-white dark:placeholder-zinc-400'
        placeholder='Type your text here'
      />
    </div>
  );
}

export default {
TextMorphButton,
TextMorphInput
}