'use client'

import { useState } from 'react'

import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import SendSms from './send-sms'
import MessageHistory from './message-history'
import BulkSMSSend from './bulk-sms-send'
import { Badge } from '@/components/ui/badge'

export default function Messaging() {
  const [currentTab, setCurrentTab] = useState('send')

  const handleTabChange = (value: string) => {
    setCurrentTab(value)
  }

  return (
    <div className='grid gap-6 max-w-sm md:max-w-xl mx-auto mt-10'>
      <Tabs
        value={currentTab}
        onValueChange={handleTabChange}
        className='space-y-4'
      >
        <TabsList className='flex'>
          <TabsTrigger value='send' className='flex-1'>
            Send
          </TabsTrigger>
          <TabsTrigger value='bulk-send' className='flex-1'>
            Bulk Send{' '}
            <Badge
              variant='outline'
              className='ml-2 bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200'
            >
              new
            </Badge>
          </TabsTrigger>
          <TabsTrigger value='history' className='flex-1'>
            History
          </TabsTrigger>
        </TabsList>

        <TabsContent value='send' className='space-y-4'>
          <SendSms />
        </TabsContent>

        <TabsContent value='bulk-send' className='space-y-4'>
          <div className='grid gap-6 max-w-xl mx-auto mt-10'>
            <BulkSMSSend />
          </div>
        </TabsContent>

        <TabsContent value='history' className='space-y-4'>
          <MessageHistory />
        </TabsContent>
      </Tabs>
    </div>
  )
}