'use client';

import { AppRouterOutput } from '@/server/trpc/types';
import { useState } from 'react';
import PollResult from './poll-result';
import PollForm from './poll-form';

type Poll = NonNullable<AppRouterOutput['poll']['get']>;
type PollQuestion = Poll['questions'];

export default function PollBlock({ poll }: { poll: Poll }) {
  const [result, setResult] = useState<PollQuestion | null>(null);

  return (
    <div className='border-t-client-red space-y-4 border-t bg-neutral-100 p-4 md:space-y-6 md:p-6'>
      <div>
        <h2 className='mb-2 text-4xl font-bold text-neutral-800'>
          {poll.title}
        </h2>
        <p className='text-lg text-neutral-800'>{poll.description}</p>
      </div>
      <div>
        {result ? (
          <PollResult result={result} />
        ) : (
          <PollForm poll={poll} setResult={setResult} />
        )}
      </div>
    </div>
  );
}