"use client"
import { Icons } from '@/components/icons';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';


export function Tracking({ data,handleValueChange }: any) {

    return (
        <Card className="flex flex-col">
            <CardHeader className="space-y-0 py-5 sm:flex-row gap-2 md:gap-0 justify-between">
                <CardTitle className='text-base'>Call tracking status</CardTitle>
                <div className='border-common border max-w-fit  rounded-full px-3 text-primary'>
                    <Select defaultValue="last_month" onValueChange={(value)=>handleValueChange(value,"tracking_type")}>
                        <SelectTrigger className="w-[123px] inline-flex justify-between border-0 shadow-none"  >
                            <SelectValue placeholder="Select" />
                        </SelectTrigger>
                        <SelectContent>
                            <SelectGroup>
                                <SelectItem value="today">Today</SelectItem>
                                <SelectItem value="last_7_days">Last 7 days</SelectItem>
                                <SelectItem value="last_month">Last month</SelectItem>
                                <SelectItem value="year">Year</SelectItem>
                            </SelectGroup>
                        </SelectContent>
                    </Select>
                </div>
            </CardHeader>
            <CardContent className="flex-1 px-8">
                <div className="space-y-4 ">
                    <div className="flex  border-light border py-3 px-4 rounded-lg items-center">
                        <span><Icons.CallIcon1 /></span>
                        <div className="ml-4 space-y-1">
                            <p className="text-sm  gray font-normal leading-none">Completed</p>
                            <p className="ml-auto  text-2xl theme-color font-semibold">{data?.completed ? data?.completed : 0}</p>
                        </div>
                    </div>
                    <div className="flex  border py-3 px-4 rounded-lg items-center">
                        <span><Icons.CallIcon2 /></span>
                        <div className="ml-4 space-y-1">
                            <p className="text-sm  gray font-normal leading-none">Voicemail</p>
                            <p className="ml-auto text-2xl theme-color font-semibold">{data?.voiceMail ? data?.voiceMail : 0}</p>
                        </div>
                    </div>
                    <div className="flex  border py-3 px-4 rounded-lg items-center">
                        <span><Icons.CallIcon3 /></span>
                        <div className="ml-4 space-y-1">
                            <p className="text-sm gray font-normal leading-none">No answer</p>
                            <p className="ml-auto text-2xl theme-color font-semibold">{data?.noAnwere ? data?.noAnwere : 0}</p>
                        </div>
                    </div>


                </div>
                {/* <div className='flex justify-center'>
                    <Button type='button' variant={'default'} className='bg-transparent text-primary font-normal text-xs border-0 shadow-none p-0'>View details <span className='ml-2 my-auto'><Icons.BlueArrow /></span></Button>
                </div> */}
            </CardContent>

        </Card >
    );
}