'use client'

import React, { useState } from 'react'
import blogData from '@/data/blog.json'
import * as Icon from "@phosphor-icons/react/dist/ssr";
import { useRouter } from 'next/navigation';
import { BlogType } from '@/type/BlogType';
import Link from 'next/link';
import Image from 'next/image';

interface Props {
  data: BlogType;
  handleNextBlogDetail: () => void;
  handlePrevBlogDetail: () => void;
}

const LayoutDetailTwo: React.FC<Props> = ({ data, handleNextBlogDetail, handlePrevBlogDetail }) => {
  const router = useRouter()

  const handleTag = (tag: string) => {
    router.push(`/blog/blog-list-one?tag=${tag}`)
  }


  return (
    <div className='list-blog lg:py-[100px] sm:py-16 py-10'>
      <div className="container">
        <div className="flex items-center justify-center">
          <div className="w-full lg:w-2/3">
            <div className="blog-paragraph">
              <div className="paragraph-heading">
                <div className="bg-img"><Image width={4000} height={4000} className="w-full rounded-2xl" src={data?.img || "/images/blog/930x593.png"} alt="img" /></div>
              </div>
              <div className="paragraph-content mt-8">
                <div className="body2 text-secondary">{`Achieving financial prosperity and attracting wealth is possible with the right strategies. Our cutting-edge solutions and expert advice are designed to help you harness your business potential and excel in the competitive market.`}</div>
                <div className="review pl-4 py-2 border-l-2 border-line mt-4">
                <div className="body2 italic">
  &ldquo; Transform your financial journey with our tailored expertise. We provide the essential tools and strategies for mastering budgeting, building savings, and making informed investment decisions to reach your financial goals.&rdquo;</div>

                  <span className="text-xs  font-bold mt-4"> CEO of dufintech</span>
                </div>
              </div>
              <div className="grid sm:grid-cols-2 gap-7 mt-8">
                {data?.listImg ? data?.listImg.map(item => (
                  <div className="w-full" key={item}> <Image width={4000} height={4000} className="w-full rounded-xl" src={item} alt="img" /></div>
                )) : (
                  <>
                    <div className="w-full"> <Image width={4000} height={4000} className="w-full rounded-xl" src="/images/blog/930x593.png" alt="img" /></div>
                    <div className="w-full"> <Image width={4000} height={4000} className="w-full rounded-xl" src="/images/blog/930x593.png" alt="img" /></div>
                  </>
                )}
              </div>
              <div className="paragraph-content mt-8">
                <div className="heading6">How to Achieve Financial Success</div>
                <div className="body2 text-secondary mt-4">{`Let us help you navigate the complexities of the financial world, maximize your earnings, and turn your creative passion into a lucrative venture. It's time to unleash your full potential and embark on a journey towards financial prosperity.`}</div>
                <div className="list-feature mt-8">
                  <div className="grid lg:grid-cols-2 gap-y-3">
                    <div className="w-full gap-y-3 flex flex-col">
                      <div className="item flex items-center gap-3">
                        <Icon.CheckCircle weight='fill' className='text-xl text-blue' />
                        <div className="text-button">Assess Your Monthly Income</div>
                      </div>
                      <div className="item flex items-center gap-3">
                        <Icon.CheckCircle weight='fill' className='text-xl text-blue' />
                        <div className="text-button">Develop a Savings and Investment Strategy</div>
                      </div>
                      <div className="item flex items-center gap-3">
                        <Icon.CheckCircle weight='fill' className='text-xl text-blue' />
                        <div className="text-button">Track and Manage Expenses</div>
                      </div>
                    </div>
                    <div className="w-full gap-y-3 flex flex-col">
                      <div className="item flex items-center gap-3">
                        <Icon.CheckCircle weight='fill' className='text-xl text-blue' />
                        <div className="text-button">Conduct Thorough Research and Analysis</div>
                      </div>
                      <div className="item flex items-center gap-3">
                        <Icon.CheckCircle weight='fill' className='text-xl text-blue' />
                        <div className="text-button">Receive Expert Investment Management and Advice</div>
                      </div>
                      <div className="item flex items-center gap-3">
                        <Icon.CheckCircle weight='fill' className='text-xl text-blue' />
                        <div className="text-button">Access Educational Resources</div>
                      </div>
                    </div>
                  </div>
                </div>
                <div className="mt-5 border border-line"></div>
                <div className="list-li mt-5 px-3">
                  <li className="body3 text-secondary"> Experience in designing, building, and supporting large-scale distributed systems in production, we excel in creating robust solutions that handle complex workloads.</li>
                  <li className="body3 text-secondary mt-2">We have extensive expertise in key security domains such as identity and access management, cryptography, and network security. Our in-depth knowledge ensures comprehensive protection for your entire digital infrastructure, safeguarding critical assets from potential threats and vulnerabilities.</li>
                  <li className="body3 text-secondary mt-2">Our team has extensive experience with database systems and their internal mechanisms, including query engines and optimizers. This expertise enables us to design efficient, high-performance databases that maximize resource utilization and ensure optimal query execution, providing fast and reliable data management solutions.</li>
                  <li className="body3 text-secondary mt-2">We have a strong foundation in core computer science skills, including algorithms, data structures, software design, and system architecture. </li>
                </div>
                <div className="end mt-5 body2 text-secondary">{``}</div>
              </div>
            </div>
            <div className="blog-more-infor mt-8">
              <div className="infor-above flex items-center justify-between flex-wrap gap-6">
                <div className="tags-cloud-block flex items-center gap-3 max-sm:flex-wrap">
                  <div className="body3">Tag(s):</div>
                  <div className="list-nav flex items-center gap-3 max-sm:flex-wrap">
                    <span className="caption2 py-2 px-4 bg-surface rounded-2xl hover:bg-black hover:text-white duration-300 cursor-pointer" onClick={() => handleTag('featured')}>Featured</span>
                    <span className="caption2 py-2 px-4 bg-surface rounded-2xl hover:bg-black hover:text-white duration-300 cursor-pointer" onClick={() => handleTag('interview')}>Interview</span>
                    <span className="caption2 py-2 px-4 bg-surface rounded-2xl hover:bg-black hover:text-white duration-300 cursor-pointer" onClick={() => handleTag('business')}>Business</span></div>
                </div>
                <div className="share-block flex items-center gap-4 max-sm:flex-wrap">
                  <div className="caption2 py-2 px-4 rounded-lg border border-line">Copy the link</div>
                  <div className="social-media flex items-center gap-3 max-sm:flex-wrap">
                    <a href="http://facebook.com" target="_blank" className='w-10 h-10 flex items-center justify-center bg-surface rounded-full hover-box-shadow hover:bg-white duration-300'><i className="icon-facebook text-black"></i></a>
                    <a href="http://linkedin.com" target="_blank" className='w-10 h-10 flex items-center justify-center bg-surface rounded-full hover-box-shadow hover:bg-white duration-300'><i className="icon-in text-black"></i></a>
                    <a href="http://twitter.com" target="_blank" className='w-10 h-10 flex items-center justify-center bg-surface rounded-full hover-box-shadow hover:bg-white duration-300'><i className="icon-twitter text-black text-sm"></i></a>
                    <a href="http://instagram.com" target="_blank" className='w-10 h-10 flex items-center justify-center bg-surface rounded-full hover-box-shadow hover:bg-white duration-300'><i className="icon-insta text-black text-sm"></i></a>
                    <a href="http://youtube.com" target="_blank" className='w-10 h-10 flex items-center justify-center bg-surface rounded-full hover-box-shadow hover:bg-white duration-300'><i className="icon-youtube text-black text-xs"></i></a>
                  </div>
                </div>
              </div>
              <div className="mt-8 border border-line"></div>
              <div className="infor-below flex max-sm:flex-wrap items-center justify-between gap-6 py-5">
                <div className="prev-block">
                  <div className="text-left cursor-pointer" onClick={handlePrevBlogDetail}>
                    <div className="text-button-uppercase text-blue">Previous</div>
                    <div className="heading7 mt-1">{data.id === 1 ? blogData[blogData.length - 1]?.title : blogData[data.id - 2].title}</div>
                  </div>
                </div>
                <div className="next-block">
                  <div className="sm:text-right cursor-pointer" onClick={handleNextBlogDetail}>
                    <div className="text-button-uppercase text-blue">Next</div>
                    <div className="heading7 mt-1">{data.id === blogData.length ? blogData[0].title : blogData[data.id].title}</div>
                  </div>
                </div>
              </div>
              <div className="border border-line"></div>
            </div>
            <div className="blog-form-contact mt-8 md:p-10 p-7 bg-surface rounded-xl">
              <div className="heading7">Leave a Comment</div>
              <form className="form-contact-input mt-6">
                <div className="grid sm:grid-cols-2 gap-5">
                  <div className="w-full">
                    <div className="body3 pb-3">Name</div>
                    <input className="bg-white rounded-lg p-4 w-full" type="text" placeholder="Alexander" required />
                  </div>
                  <div className="w-full">
                    <div className="body3 pb-3">Email</div>
                    <input className="bg-white rounded-lg p-4 w-full" type="email" placeholder="avitex@mail.com" required />
                  </div>
                  <div className="w-full sm:col-span-2">
                    <div className="body3 pb-3">Comment</div>
                    <textarea className="bg-white rounded-lg w-full p-4" rows={3} placeholder="Write comment..." required ></textarea>
                  </div>
                  <div className="w-full sm:col-span-2 flex items-center">
                    <input type="checkbox" id='check' name="check" />
                    <label htmlFor='check' className="caption1 pl-2">Save my name, email, and website in this browser for the next time I comment.</label>
                  </div>
                </div>
                <div className="button-block mt-8">
                  <button className="button-main hover:bg-black bg-blue text-white text-button rounded-full">Submit Comment</button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

export default LayoutDetailTwo