import { KeyRound, UserPlus } from 'lucide-react'

interface QuickActionsProps {
  onResetPassword: () => void
  onCreateAccount: () => void
}

export default function QuickActions({
  onResetPassword,
  onCreateAccount,
}: QuickActionsProps) {
  return (
    <div className="space-y-6">
      <div>
        <h3 className="text-sm font-semibold text-silos-text">Quick Actions</h3>
        <div className="mt-3 space-y-2">
          <button
            type="button"
            onClick={onResetPassword}
            className="flex w-full items-start gap-3 rounded-xl border border-silos-cream-dark bg-silos-cream/30 p-4 text-left transition-colors hover:border-silos-tan hover:bg-silos-cream/60"
          >
            <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-silos-brown/10">
              <KeyRound className="h-4 w-4 text-silos-brown" />
            </div>
            <div>
              <p className="text-sm font-semibold text-silos-text">Reset Password</p>
              <p className="mt-0.5 text-xs text-silos-muted">
                Reset your account password securely
              </p>
            </div>
          </button>

          <button
            type="button"
            onClick={onCreateAccount}
            className="flex w-full items-start gap-3 rounded-xl border border-silos-cream-dark bg-silos-cream/30 p-4 text-left transition-colors hover:border-silos-tan hover:bg-silos-cream/60"
          >
            <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-silos-brown/10">
              <UserPlus className="h-4 w-4 text-silos-brown" />
            </div>
            <div>
              <p className="text-sm font-semibold text-silos-text">Create New Account</p>
              <p className="mt-0.5 text-xs text-silos-muted">
                Join Silos and start your journey today
              </p>
            </div>
          </button>
        </div>
      </div>
    </div>
  )
}