'use client';

import { PollQuestionType } from '@/server/modules/poll/types/poll-question-type.enum';
import { AppRouterOutput } from '@/server/trpc/types';
import { Separator } from '@/components/ui/separator';
import PollPieChart from '@/components/shared/charts/pie-chart';
import PollBarChart from '@/components/shared/charts/bar-chart';
import PollLineChart from '@/components/shared/charts/line-chart';

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

export default function PollResult({ result }: { result: PollResult }) {
  return (
    <div className='space-y-4 md:space-y-6'>
      {result.map((item, index) => (
        <article
          className='space-y-2 border-l border-l-neutral-400 bg-white p-3 md:p-6'
          key={index}
        >
          <h4 className='font-serif text-lg font-bold'>{item.title}</h4>

          {item.type === PollQuestionType.RADIO && (
            <div>
              <PollPieChart item={item} />
            </div>
          )}

          {item.type === PollQuestionType.CHECKBOX && (
            <div>
              <PollBarChart item={item} />
            </div>
          )}

          {item.type === PollQuestionType.SLIDER && (
            <div>
              <PollLineChart item={item} />
            </div>
          )}

          {item.type === PollQuestionType.TEXTAREA && (
            <Separator className='mt-10 mb-2 bg-neutral-400' />
          )}
        </article>
      ))}
    </div>
  );
}