Morph Button

'use client';

import * as React from 'react';
import { MorphButton } from '@/components/ui/morph-button';
import { ArrowRight, Mail, Check } from 'lucide-react';

export default function MorphButtonFormDemo() {
const [status, setStatus] = React.useState<'idle' | 'loading' | 'success'>('idle');
const [email, setEmail] = React.useState('');

const handleSubmit = (e: React.FormEvent) => {
  e.preventDefault();
  setStatus('loading');
  
  // Simulate network request
  setTimeout(() => {
    setStatus('success');
    // Reset after showing success state
    setTimeout(() => {
      setStatus('idle');
      setEmail('');
    }, 2000);
  }, 1500);
};

return (
  <div className="flex w-full items-center justify-center bg-muted/20 p-6">
    <div className="w-full max-w-sm rounded-xl border bg-background p-6 shadow-sm">
      <div className="mb-4 space-y-1">
        <h3 className="font-semibold leading-none tracking-tight">Subscribe</h3>
        <p className="text-sm text-muted-foreground">
          Join our newsletter for weekly updates.
        </p>
      </div>
      
      <form onSubmit={handleSubmit} className="space-y-4">
        <div className="space-y-2">
          <label htmlFor="email" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
            Email
          </label>
          <div className="relative">
            <Mail className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
            <input
              type="email"
              id="email"
              required
              placeholder="you@example.com"
              className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 pl-9 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
            />
          </div>
        </div>

        <div className="flex justify-end">
          <MorphButton
            type="submit"
            disabled={status !== 'idle' || !email}
            isLoading={status === 'loading'}
            text={status === 'success' ? 'Subscribed!' : 'Join Now'}
            icon={
              status === 'success' ? (
                <Check className="h-4 w-4" />
              ) : (
                <ArrowRight className="h-4 w-4" />
              )
            }
            className={status === 'success' ? 'bg-green-600 border-green-600 hover:bg-green-700' : ''}
          />
        </div>
      </form>
    </div>
  </div>
);
}